Using material design icons and Angular Material SVG

Question

I want to use Angular Material with Material Design Icon... (No icons font but SVG)

But I don't know how to...

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: (For example social set)

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

There is no path to sets into https://github.com/google/material-design-icons/tree/master/social/svg/production

I must declare all icon individually ? ^^ strange...

Anyone know the secret ?

Imaginaerum Imaginaerum · Accepted Answer · 2016-03-30T15:38:41

I found a solution:

For example social domain icon

It's not

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

but:

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

JS (I use a copy of: 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');
    });
})();

Using material design icons and Angular Material SVG

1 Answers