How to use Material Design Icons In Angular 4?

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:

1. 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:

   

2. 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'));
     }
   }
   

3. Make sure to include assets folder under .angular-cli.json in assets (Although by default, it will be there):

   {
     "apps": [
       {
         ...
         "assets": [
           "assets"
         ]
       }
     ]
   }
   

4. Finally, use it via the MatIcon component with the svgIcon input:

   <mat-icon svgIcon="open-in-new"></mat-icon>
   

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

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.