How to use md-svg-icon / Other icon font library like Font Awesome? about angular-material-sidemenu

[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]

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

[tim-lukacik]

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.