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)

Answer 1

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.

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

Sign up