AngularJS Material web font icons () 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?

score 31 · Accepted Answer · answered Jun 07 '15 at 16:14

31

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>

answered Jun 07 '15 at 16:14

Ovi

604
8
16

1

If some one has trouble with the vertical alignment please have a look at: http://stackoverflow.com/a/30849774/2576531 – Yannic Bürgmann Nov 05 '15 at 17:28

score 23 · Answer 2 · answered Jun 15 '15 at 16:01

23

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>

answered Jun 15 '15 at 16:01

Stefan

231
1
2

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. – mwidmann Sep 23 '15 at 12:48
1

this should be the accepted answer. The answer currently accepted causes trouple with the alignment of the font icon. – Yannic Bürgmann Nov 05 '15 at 17:27

score 13 · Answer 3 · answered Sep 27 '15 at 19:45

13

You can just use:

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

that's all, here is example

answered Sep 27 '15 at 19:45

Andrei Kropotin

293
4
9

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. – Helen Che Oct 01 '15 at 02:43
2

@VeraWang Yes, icons aren't included in the 'Angular Material' repo, if you want to host them locally, [here is instruction](http://google.github.io/material-design-icons/#setup-method-2-self-hosting). – Andrei Kropotin Oct 05 '15 at 14:59
1

Thanks. The documentation tells you to use ``, but clearly that's wrong. – Paul LeBeau Sep 09 '16 at 06:16

Mikal Madsen · Answer 4 · 2017-05-20T12:16:07.727

3

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).

edited May 20 '17 at 12:16

answered May 19 '17 at 21:15

Mikal Madsen

569
1
7
18

May be especially relevant if your creating your own component for an npm package. – Joshua Drake Jul 18 '17 at 17:28
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. https://github.com/angular/material2/issues/6413 – cbros2008 Aug 11 '17 at 11:03

Mahesh K · Answer 5 · 2016-10-18T19:03:36.177

1

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">

edited Oct 18 '16 at 19:03

answered Jun 04 '16 at 16:09

Mahesh K

1,689
3
23
36

score 1 · Answer 6 · answered Sep 14 '16 at 03:16

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

score 0 · Answer 7 · answered Feb 03 '17 at 20:58

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.

score 0 · Answer 8 · answered Jul 15 '17 at 17:36

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>

AngularJS Material web font icons () not showing up?

8 Answers8