How to use md-svg-icon / Other icon font library like Font Awesome?

[anvithks]

I have an application in which I would like to use the font awesome library for the icons. I am not able to change it currently without editing the directive template. Is there a simpler method?

Also the documentation does not cover how to use the md-svg-icon attribute. Could you please give some demo or example?

Thank you.

[suzerain]

I have font awesome icons working for normal buttons, but not for the md-sidemenu-content directive, where i am trying to use md-font-icon="" along with md-heading. Did you by chance get that to work?

[agnjunio]

I created a little patch to support md-font-icon for md-sidemenu-content and a md-arrow-src attribute in case you want to change the arrow svg. Fork me

[lealceldeiro]

I cannot get the md-icon and md-svg-icon properties working properly! Please, could you provide a working example, demo, plunker, jsfiddle, codepen or any similar?

@agnjunio how could I use your forked project instead of this one?

[agnjunio]

@lealceldeiro I'm in a rush now, but here is a post explaining: http://debuggable.com/posts/how-to-fork-patch-npm-modules:4e2eb9f3-e584-44be-b1a9-3db7cbdd56cb

If you have any further questions, I can explain it later.

[lealceldeiro]

Thanks, @agnjunio , I got it :) Now, what would be the link which I should point to your project in my dependency, in my bower.json file?

[lealceldeiro]

Ok, I just used this one (https://github.com/agnjunio/angular-material-sidemenu/archive/1.0.1.tar.gz). Correct me if I'm wrong

[agnjunio]

The current head link is: https://github.com/agnjunio/angular-material-sidemenu/archive/master.zip Replace .zip with .tar.gz if you prefer

[lealceldeiro]

:+1: Great!, @agnjunio. This fixes the issue. I cannot express my gratitude good enough! Thanks dude!

[T89L]

You can use CSS. On your md-sidemenu-content element put a class like "my-button". Now add something like this to your stylesheet: .md-sidemenu-content.my-button span::before { font-family: FontAwesome; content: "\f015\00a0\00a0"; }

f015 is unicode for the home icon, you can grab the unicode for other icons on their site. 00a0 is just a space, I found 2 spaces to work nicely with this "hack".

Good luck.