Question

我想将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

的路径

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

有人知道这个秘密吗？

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

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

1 个答案: