How to use <md-icon> in Angular Material?

Question

I was wondering how to use Material's icons, as this is not working:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

I guess there is a problem with the path given as parameter to the the icon attribute. I would like to know where this icon folder actually is?

Protectionism

Answer 1

As the other answers didn't address my concern I decided to write my own answer.

The path given in the icon attribute of the md-icon directive is the URL of a .png or .svg file lying somewhere in your static file directory. So you have to put the right path of that file in the icon attribute. p.s put the file in the right directory so that your server could serve it.

Remember md-icon is not like bootstrap icons. Currently they are merely a directive that shows a .svg file.

Update

Angular material design has changed a lot since this question was posted.

Now there are several ways to use md-icon

The first way is to use SVG icons.

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Example:

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

or

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

:where getMyIcon is a method defined in $scope.

or <md-icon md-svg-icon="social:android"></md-icon>

to use this you have to the $mdIconProvider service to configure your application with svg iconsets.

angular.module('appSvgIconSets', ['ngMaterial'])  
  .controller('DemoCtrl', function($scope) {})  
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('img/icons/sets/core-icons.svg', 24);    
  });

The second way is to use font icons.

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

prior to doing this you have to load the font library like this..

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

or use font icons with ligatures

<md-icon md-font-library="material-icons">face</md-icon>

<md-icon md-font-library="material-icons">#xE87C;</md-icon>

<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>

For further details check our

Angular Material mdIcon Directive documentation

$mdIcon Service Documentation

$mdIconProvider Service Documentation

Protectionism

Quick note about ligatures: use underscores instead of hyphens. It's probably documented somewhere in your further details links but ain't nobody got time for dat. ;-) – Zoosperm

What is the proper way to color them? – Unni

@mattblang if you using them as font icon, then it's just a font. So setting the text color in css (like { color: red }) will color them. – Neurotomy

Exactly what I needed. I was struggling with the style while using <i class='material-icons'>icon_name</i>, but md-font-library solved my issue perfectly. – Oscillation

Why using a variable in md-icon it not works? like <md-icon md-font-library="material-icons">{{user.type}}</md-icon> .. in this case user.type="face" and using as a text it works <md-icon md-font-library="material-icons">face</md-icon> – Floccus

Thank you soo much! Either I am missing something or the docs of Angular Material are extremely bad. Why can't they just show this really straight-forward kind of displaying an icon? No, it has to be with a controller, loops, ... Arghh. – Strophanthus

What about angular2+? – Paraprofessional

Answer 2

The simplest way today would be to simply request the Material Icons font from Google Fonts, for example in your HTML header tag:

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

or in your stylesheet:

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

and then use as font icon with ligatures as explained in the md-icon directive. For example:

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

The complete list of icons/ligatures is at https://www.google.com/design/icons/

Earthen

how to add an icon to a button? – Studer

Answer 3

It actually works now from bower.

bower install material-design-icons --save

It downloads 37.1 KBs. Then it extracts and installs. You will see a folder called material-design-icons in bower_components folder. The total size is around 299KBs

Pipsqueak

And how to use it then? – Bise

Answer 4

md-icons aren't in the bower release of angular-material yet. I've been using Polymer's icons, they'll probably be the same anyway.

bower install polymer/core-icons

Cohune

Answer 5

Easy way: use the following CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 

Inject ngMdIcons to your angularjs application:

angular.module('demoapp', ['ngMdIcons']);

Use ng-md-icon directive in your html, specifying fill-color through css:

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 

Source: https://klarsys.github.io/angular-material-icons/

Luralurch

its annoying ng-md doesnt center the icon in icon buttons like md-icon does. – Lindahl

yes the same problem here. mostly you'll have to refine the positions with css. position:relative; and then move the svg element or container by left-top-right-bottomto the better position you want. – Luralurch

Answer 6

In their latest release there's a directive called md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Weeper

bower install material-design-icons github.com/google/material-design-icons – Levirate

Download it, don't use bower. It's 57MB – Levirate

Answer 7

All md- prefixes are now mat- prefixes as of time of writing this!

Put this in your html head:

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

Import in our module:

import { MatIconModule } from '@angular/material';

Use in your code:

<mat-icon>face</mat-icon>

Here is the latest documentation:

https://material.angular.io/components/icon/overview

Florist

OP is using AngularJS Material. – Cecilla

Answer 8

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

source: https://material.angularjs.org/#/demo/material.components.button

Centric

Answer 9

By Using like
use css and font same location

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Sensationalism