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

css angularjs google-webfonts
Helen Che picture Helen Che · Jun 2, 2015 · Viewed 22.1k times · Source

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

Ovi picture Ovi · Jun 7, 2015

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 questions

AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More
What is the best way to conditionally apply a class?

Lets say you have an array that is rendered in a ul with an li for each element and a property on the controller called selectedIndex. What would be the best way to add a class to the li with …

Read More
How do I conditionally apply CSS styles in AngularJS?

Q1. Suppose I want to alter the look of each "item" that a user marks for deletion before the main "delete" button is pressed. (This immediate visual feedback should eliminate the need for the proverbial "are you sure?" dialog box.) …

Read More