Materialdesign: Angular Material: load iconSet

[Zorgatone]

I wasn't able to load the svg bundle with this API: https://material.angularjs.org/latest/api/service/$mdIconProvider

I had to make myself a bundled file like this one:
https://gist.github.com/Zorgatone/82706d72217160d8f971

[Zorgatone]

For the reference I just saw what Google did on their example, and to mimic that I concatenated all the .SVG files, and removed the XML, SVG and DOCTYPE declarations with a regular expression.

Then I wrapped everything inside <svg><defs>...</defs></svg> and I only kept each icon's path inside its group. Always using find and replace with regular expressions.

Example:

<svg><defs>
<g id="menu-down"><path d="M 7,10L 12,15L 17,10L 7,10 Z /></g>
<g id="menu-left"><path d="M 14,7L 9,12L 14,17L 14,7 Z"/></g>
<g id="menu-right"><path d="M 10,17L 15,12L 10,7L 10,17 Z"/></g>
<g id="menu-up"><path d="M 7,15L 12,10L 17,15L 7,15 Z"/></g>
</defs></svg>

[Templarian]

Test this download

Let me know if the above download works.

[Zorgatone]

@Templarian commented on 22 nov 2015, 09:50 CET:

Test this download

Let me know if the above download works.

As I read through the SVG code, I'm 99.99% sure that'll work... I'll try it anyway, the format seems correct.

[Templarian]

Let me know if this updated getting started section makes sense for Angular Material.

https://materialdesignicons.com/getting-started

[Zorgatone]

Confirmed to be functional.

See the screenshot:

[Zorgatone]

@Templarian, the correct usage of the <md-icon> directive should be:

<md-icon md-svg-icon="android"></md-icon>

Button example:

<md-button aria-label="Android" class="md-icon-button">
    <md-icon md-svg-icon="android"></md-icon>
</md-button>

[xenit-raven]

Thanks for this! I'm looking forward to using this in my angular material project!

[Zorgatone]

:+1:

[xenit-raven]

Confirmed working. I'll start migrating my project to this solution soon.

[Templarian]

Thanks guys! Closing out the issue.

Also, I updated the example usage to the correct tag, along with the button example.

[Zorgatone]

Maybe you could also separate the two code snippets, otherwise some "newbies" may think they have to write the full code in the example...

Or you could just add a comment in between 😇

[Zorgatone]

I mean, separating the simple icon from the button with the icon..

[Templarian]

Yea, I'll assume that if they are far enough along to replace the default icon set they'll figure that out. Ha.

[Zorgatone]

The real issue is that Google didn't provide a "default" one. There are actually some really small examples, but no official icon set.

That's why I used this repo

[jbcpollak]

I can't find this svg in the package published to npm

[Templarian]

@jbcpollak We don't publish this to NPM, just the webfont. If you think this would be useful please create an issue requesting this feature.

[jbcpollak]

Thanks for the quick response. is there a benefit to using the svg or font system? I'm wrestling with how integrate one or the other.

[Templarian]

@jbcpollak Uhh, both are fine. Some people write scripts to only include the icons they are using rather than including all 1722 icons currently released in the webfont. I will say mobile renders SVG slightly slower than webfonts, but it's not really noticeable until you have like 100+ icons visible.

A lot use the webfont because they are use to Font Awesome, but SVG is more ideal if you're including only the icons you're using in the build process.