Search code examples
cssangularjsgoogle-webfonts

AngularJS Material web font icons (<md-icon>) not showing up?

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?

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>