使用 material 设计图标和 Angular Material SVG

Question

我想使用 Angular Material with 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

的路径

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

有人知道这个秘密吗？

Answer 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');
    });
})();

使用 material 设计图标和 Angular Material SVG

Using material design icons and Angular Material SVG

angularjs

angular-material