Angular Material Design: how to automatically use all the built-in UI icons?

Question

I am trying an Angular app project with the Google Angular Material library.

Added #master branch via Bower as directed. Linked the CSS and JS fils from Bower Components to my index page as directed.

Works as expected, except things like dialogs have SVG icons, which are defined in the html an pathed as so: <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>

Which is not in my project nor the Bower Components folder...

And therefore gives me a 404:

How should i configure the project to get all the images as expected? I'd create that img/icons path if I knew where to get all possible icons...

OK, I have added this to my app.js:

angular.module('app').config(function($mdIconProvider) {
  // Configure URLs for icons specified by [set:]id.
  $mdIconProvider
  .defaultIconSet('bower_components/material-design-icons');
});

But still a 404... the bower download is like 200 mb of icons... do I need ot list each icon I want to link? As in .icon("menu", "./assets/svg/menu.svg", 24)

Have you check `$mdIconProvider`? You need to configure the icons for using `md-icon`. https://material.angularjs.org/latest/api/service/$mdIconProvider — Shaohao, Nov 30 '15 at 15:52
I've tried that. I notice the Bower install consisted of several MB of icons. Can I link to the root? See update above... — Steve, Nov 30 '15 at 19:19
Of course I notice I can download just the icon I needed -- `ics_close_24px.svg` and put it at the path. So, which is preferred? — Steve, Nov 30 '15 at 19:35

score 1 · Accepted Answer · edited May 23 '17 at 11:53

I did have the same problem and I was not able to find a proper answer.

After some research, I've finally found something ! https://github.com/angular/material/issues/1668#issuecomment-156368247

As "ranbuch" said, once you've loaded the font Material Icons (either from a CDN or locally), you can just use this directive : <md-icon aria-label="Menu" class="material-icons">menu</md-icon> and replace menu by the name of the icon you're looking for.

This way, it allows you to skip the long listing of every svg.

PS : There's also a good stackoverflow answer here.

score -1 · Answer 2 · answered Dec 01 '15 at 11:46

Copy all the selected svg icons you need to images/icons folder inside your application and then use them as below :

<md-icon md-svg-src="images/icons/leftArrow.svg" 
         ng-click="previous()"  class="icon-color">
</md-icon>

If you are planning to use lots of icons, use css font icons. One css file will load all your icons, instead of multiple svg links.

Check section 1 here of material icons guide

Angular Material Design: how to automatically use all the built-in UI icons?

2 Answers2