CODEWITHSUNDEEP
cssangularjsgoogle-webfonts
Helen Che
Helen Che

Reputation: 2011

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?

Upvotes: 20

Views: 22931

Answers (8)

MGA
MGA

Reputation: 531

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>

Upvotes: 0

Mikal Madsen
Mikal Madsen

Reputation: 579

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

Upvotes: 3

Vadim
Vadim

Reputation: 633

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. enter image description here

Upvotes: 0

Mahesh K
Mahesh K

Reputation: 1697

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

Upvotes: 1

Nicholas Albion
Nicholas Albion

Reputation: 3284

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

Upvotes: 1

Andrei Kropotin
Andrei Kropotin

Reputation: 293

You can just use:

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

that's all, here is example

Upvotes: 13

Stefan
Stefan

Reputation: 231

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>

Upvotes: 23

Ovi
Ovi

Reputation: 604

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>

Upvotes: 31

Related Questions