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

Question

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?

Emit

Answer 1

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>

Berrie

If some one has trouble with the vertical alignment please have a look at: https://mcmap.net/q/609740/-angularjs-material-web-font-icons-lt-md-icon-gt-not-showing-up – Trudey

Answer 2

I just had the same problem as you and could only use it with <i class="material-icons">android</i> until i figured out i had an older version of angular material.

I used the CDN of google but they didn't have the newest version. You need to download it from the angular material site (or update with npm) and link to the local source code.

now i can use it with

<md-icon md-font-set="material-icons">delete</md-icon>

Saki

Thanks, that helped me a lot! The getting started guide still refers to the 0.9.4 Version, which is a couple of versions old. – Flog

this should be the accepted answer. The answer currently accepted causes trouple with the alignment of the font icon. – Trudey

Answer 3

You can just use:

<md-icon>android</md-icon>

that's all, here is example

Semipro

Thanks, is there a way to use it without CDN? I'm importing angular material via npm and it looks like the icons aren't included in the repo. I can't seem to find the official source (apart from CDN) either. – Emit

@VeraWang Yes, icons aren't included in the 'Angular Material' repo, if you want to host them locally, here is instruction. – Semipro

Thanks. The documentation tells you to use <md-icon md-font-icon="android"</md-icon>, but clearly that's wrong. – Yarndyed

Answer 4

Edit: This answer is for Angular, not AngularJS (post originally said Angular). Leaving this up for anyone lost.

Since none of the other answers mention that you need to include the MdIconModule, I will. Easy to forget.

<i class="material-icons">icon_name</i> will work as long as the instructions on https://google.github.io/material-design-icons/ are followed.

To get <md-icon>icon_name</md-icon> to work, you must also

• import { MdIconModule } from '@angular/material' into your AppModule and
• list MdIconModule among your AppModule's imports

(or create a separate module to handle loading of Angular Material modules, as described on https://material.angular.io/guide/getting-started).

Crankshaft

May be especially relevant if your creating your own component for an npm package. – Grasso

Thanks a lot for this, you're a legend. I've created an issue on the Material teams board so hopefully the documentation gets updated. github.com/angular/material2/issues/6413 – Discrimination

Answer 5

Usage of md-icons with google fonts:

: <md-icon md-font-set="material-icons"> android </md-icon>

Dependencies

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

 <link href="https://material.angularjs.org/latest/angular-material.min.css" rel="stylesheet">

Is

Answer 6

If you'd prefer to use CSS class names instead of ligatures (because you don't want screen readers to read out the name of the icon) it seems that you need to add your own CSS:

.material-icons {
  // This bit is included when you import
  // https://fonts.googleapis.com/icon?family=Material+Icons
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

  // ...but you need to add your own CSS class names for the icons you want to use:
  &.arrow-backward::before {
    content: '\e5c4';
  }
  &.arrow-forward::before {
    content: '\e5c8';
  }
  ...
}

Then you can use it like so:

<md-button>
   Next
   <i class="material-icons right arrow-forward"></i>
</md-button>

For a full list of icon codes: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Stairhead

Answer 7

I used 4 approaches, 3 of them mentioned on this page:

    <md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <ng-md-icon icon="perm_identity"></ng-md-icon>
    </md-button>

    <md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <md-icon md-font-set="material-icons">perm_identity</md-icon>
    </md-button>

    <md-button ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <md-icon>perm_identity</md-icon>
    </md-button>

    <md-button class="md-icon-button" ng-click="toggleSidenav('right')" flex=5 aria-label="User">
        <i class="material-icons">perm_identity</i>
    </md-button>

Number 1 icon disappears on another component update. And only number 2 & 3 aligned identically within the button.

Laudatory

Answer 8

To use md-icons we'll have to include the material icon style in index.html

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

then start using icons with any valid html element or with <md-icon>, just to be sure class="material-icons is what making this possible and important to get the icons.

<md-icon class="material-icons">delete</md-icon>
<i class="material-icons">delete</i>
<span class="material-icons">delete</span>

Begrime