Css – AngularJS Material web font icons () not showing up

angularjscssgoogle-webfonts

Not sure if it's the documentation that's confusing me but I'm having difficulties getting md-icons to work (its more work than other icon fonts). Instructions here specify to Use <md-icon md-font-icon="classname" />.

Here is a sample demo with the icon font stylesheet loaded and a <md-icon md-font-icon="android" /> as per the documentation's instructions, nothing is showing up however. What am I doing wrong?

Best Solution

I also struggle trying to get the icons to show as well, so here is what I ended up doing:

Add to the head of your html the following

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

then add your icon using the following:

<i class="material-icons">android</i>

you could also use it inside an md-button as follows:

<md-button class="md-icon-button" ng-click="someFunc()">
    <i class="material-icons">android</i>
</md-button>
Related Question