Steve Steve - 1 year ago 190
AngularJS Question

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

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:
enter image description here

How should i configure the project to get all the images as expected? I'd create that
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.

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 Source

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

After some research, I've finally found something !

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download