How to use Material Design Icons In Angular 4?

77,492

Solution 1

Instructions on how to include Material Design Icons into your Angular Material app can now be found on the Material Design Icons - Angular documentation page.

TL;DR: You can now leverage the @mdi/angular-material NPM package which includes the MDI icons distributed as a single SVG file (mdi.svg):

npm install @mdi/angular-material

This SVG file can then be included into your app by including it in your project's assets configuration property in angular.json:

{
  // ...
  "architect": {
    "build": {
      "options": {
        "assets": [
          { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
          { "glob": "favicon.ico", "input": "./", "output": "./" },
          { "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
        ]
      }
    }
  }
  // ...
}

Your app's main module will also need the necessary imports (HttpClientModule from @angular/common/http used to load the icons and MatIconModule from @angular/material/icon) to be declared, as well as adding the icon set to the registry:

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  imports: [
    // ...
    HttpClientModule,
    MatIconModule
  ]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(
      domSanitizer.bypassSecurityResourceHtml('./assets/mdi.svg')
    );
  }
}

A StackBlitz demo is also now available.

The steps for older versions of Angular are as mentioned below:

Simply follow these steps:

Download mdi.svg from here under the Angular Material section and place it in your assets folder, which should be located at (from your project's root) /src/assets:

In your app's module (aka app.module.ts), add the following lines:

import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
...
export class AppModule {
  constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer){
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg'));
  }
}

Make sure to include assets folder under .angular-cli.json in assets (Although by default, it will be there):
```
{
  "apps": [
    {
      ...
      "assets": [
        "assets"
      ]
    }
  ]
}
```
Finally, use it via the MatIcon component with the svgIcon input:
```
<mat-icon svgIcon="open-in-new"></mat-icon>
```

Solution 2

For those who prefer to use SCSS:

Install the font

$> npm install material-design-icons

import in src/styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

and use it in HTML as described here

<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>

In Order to refer to Sam Claus' comment, thank you for this, I've added the installation and use of Templarian's design icons. It is similar to the one above.

Install the font through the package manager

$> npm install @mdi/font

import the stylesheet in src/styles.scss, or in angular.json as described in the comment of A. Morel here

@import '~@mdi/font/css/materialdesignicons.css';

or using the CDN URL in index.html or wherever and use it in HTML as described here

<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>

Addendum: My answer's a little bit older. This still works fine but is no longer state of the art. The answer of A. Morel here is a bit more contemporary.

Solution 3

Install npm package

npm install material-design-icons --save
npm install --save @angular/material @angular/cdk

Add material icons css to your .angular-cli.json (don't forget to restart "ng serve")

{
  "apps": [
    {
      "styles": [
        "node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

or in your src/styles.scss

@import '~material-design-icons/iconfont/material-icons.css';

Import module in your app.module.ts

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

...

@NgModule({
  imports: [
      ...,
      MatIconModule
  ],

And use it like that:

<mat-icon>location_off</mat-icon>

Pick the name from Material Design Icons => https://material.io/tools/icons/?style=baseline

Solution 4

Similar to the answer by @creep3007, you can specify the stylesheet in your .angular-cli.json:

Install npm package

npm install material-design-icons --save

Add material icons to your .angular-cli.json

{
  "apps": [
    {
      "styles": [
        "../node_modules/material-design-icons/iconfont/material-icons.css"
      ]
    }
  ]
}

Use it

<i class="material-icons">visibility</i>

Solution 5

Note this answer applies to the Material Design Icons by Templarian and NOT the icons of the same name by Google. I don't understand why these instructions aren't in the Readme, but here you go.

First, install the package:

npm install @mdi/font --save

Then, it is necessary to add the stylesheet to your styles.scss file. I added the following to the end of my file:

//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

Note the $mdi-font-path is necessary to override a default set within the @mdi/font/scss/_variables.scss which causes the webpack compiler to complain. If you forget to do this, you will get a series of errors, as follows:

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--3-2!./node_modules/sass-loader/lib/loader.js!./src/styles.scss Module not found: Error: Can't resolve '../fonts/materialdesignicons-webfont.eot' in '/home/myRepo/myApp'

Edit: I'm not sure if this is necessary (it probably is in some cases), but I also updated the .angular-cli.json file styles element:

"styles": [
        "../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",

Another alternative to the above, which resulted in the icons working with very little effort, was to import the CSS directly. In the typescript file, I replaced the styleUrls element (to avoid a strange bug with Karma):

 // styleUrls: ['./graphics-control.component.css'],
  styles: [require('./my.component.css'),
           require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]

View more solutions

77,492

Author by

Matthias Herrmann

I'm currently studying media computer science. try{} it on your own first and then finally{} ask.

Updated on July 09, 2022

Comments

Matthias Herrmann almost 2 years

I want to use the icons from https://materialdesignicons.com/ in my angular 4 project. The instructions on the website are only covering how to include it in Angular 1.x (https://materialdesignicons.com/getting-started)

How can I include the Material design icons so I can use them like <md-icon svgIcon="source"></md-icon> using Angular Material and ng serve?

NOTE: I already Included the google material icons which are different!
BOT Axel almost 7 years

Thanks you very much :D
Rice Junkie almost 7 years

Thank you for your informative response.I have been battling a very bizarre issue over the past day. I am using <md-icon svgIcon="PATH"></md-icon> successfully on my local environment. Icons show up and everything is beautiful when I deploy the same code to my test server I get the following error. Error retrieving icon: <svg> tag not found basically the <svg> tag does not get rendered inside md-icon. I can confirm that all SVGs return 200 and are loaded correctly. There are no other issues whatsoever. I would appreciate any help or hint. I am keeping my SVG folder under my public folder
Edric over 6 years

@RiceJunkie What version of angular-material2 are you using?
Rice Junkie over 6 years

I am using 4.3.6. I can confirm that it has nothing to do with the build tool and the file assets are included in the build. I ended up using HTML5 SVG tags but it would be nice to know why it didn't work.
tatsu over 6 years

bypassSecurityResourceUrl doesn't exist on domSanitizer. also it's not MdIconRegistry it's MatIconRegistry. and you need to add the npm install part. your guide needs to be updated.
tatsu over 6 years

MatIconModule *
Edric over 6 years

@tatsu What npm install? I've updated the md prefix to mat.
tatsu over 6 years

npm install --save @angular/material @angular/cdk
tatsu over 6 years

as far as I understand without them it can't work? or can it?
Edric over 6 years

@tatsu I'm expecting those who read this guide already know how to setup Angular and Angular Material, but feel free to edit my answer.
Edric over 6 years

OP doesn't use Google Material Design Icons. He uses MaterialDesignIcons by Templarian.
tatsu over 6 years

the thing is I disagree with Material's distribution of it's npm packages. both these packages are served straight from github and as such fail to download within big businesses (which have company firewalls). Do you know of an npm mirror for these?
thekingtn over 6 years

which is the best way to include material icon, include it into scss file or into angular-cli.json ?
MK10 about 6 years

Isn't there a way to use the font instead of SVG? It's a lot smaller.
bvdb over 5 years

but it's unfortunate that you have to install the entire material dependency just to use the ´<mat-icon` tags and icons. That's what it means, right ?
Boldizsar about 5 years

Thanks! This was exactly what I was looking for.
Rin and Len almost 5 years

this answer misses the steps where you have to add the path to the css file in angular.jsonand restart the server (ng serve) as detailed in @A.Morel answer below. And also the steps for àpp.module.ts .
Sam Claus over 4 years

@bvdb The latest versions of Angular do a lot of tree shaking and compile-time magic. I still don't fully understand to be honest, but when you build for production with ahead-of-time compilation, new Angular will literally compile your templates to TypeScript code and transpile that to JavaScript. You also only pay for modules you use from libraries. It will not bundle all of Angular Material if you just use the icons module.
Sam Claus over 4 years

The question was asking about Material Design Icons by Templarian, NOT the ones provided by Google (material-design-icons on NPM).