Vera Wang Vera Wang - 6 months ago 55
CSS Question

Angular 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?

Answer

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>