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>
img/icons
angular.module('app').config(function($mdIconProvider) {
// Configure URLs for icons specified by [set:]id.
$mdIconProvider
.defaultIconSet('bower_components/material-design-icons');
});
.icon("menu", "./assets/svg/menu.svg", 24)
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.