使用材料设计图标和 Angular Material SVG答案

【问题标题】：Using material design icons and Angular Material SVG使用材料设计图标和 Angular Material SVG
【发布时间】：2016-07-18 15:48:13
【问题描述】：

我想使用 Angular Material 和 Material Design Icon...（没有图标字体，但 SVG）

但我不知道如何...

HTML：

<!-- Icon ID; may contain optional icon set prefix; --> 
<!-- icons must registered using $mdIconProvider - OK, but doesn't work -->
<md-icon md-svg-icon="social:android" aria-label="android "></md-icon>

JS：（例如社交集）

angular.module('appSvgIconSets', ['ngMaterial'])
    .controller('DemoCtrl', function($scope) {})
    .config(function($mdIconProvider) {
        $mdIconProvider
           .iconSet('social', 'url/to/sets/social-icons.svg', 24)
           .defaultIconSet('url/to/sets/core-icons.svg', 24);
});

没有设置到https://github.com/google/material-design-icons/tree/master/social/svg/production的路径

我必须单独声明所有图标？ ^^奇怪...

有人知道这个秘密吗？

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

我找到了解决办法：

例如社交域图标

不是

<md-icon md-svg-icon="social:domain" aria-label="domain "></md-icon>

但是：

<md-icon md-svg-icon="social:ic_domain_24px" aria-label="domain "></md-icon>

JS（我用的是：https://github.com/google/material-design-icons/blob/master/sprites/svg-sprite/svg-sprite-social.svg的副本）

(function () {
    'use strict';
    var app = angular.module('CptApp', ['ngMaterial']);
    app.config(function ($mdIconProvider) {
        $mdIconProvider.iconSet('social', '/path/to/icons/svg-sprite-social.svg');
    });
})();

【讨论】：