How to use Material Design Icons In Angular 4?

Question

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!

Answer 1

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.

Answer 2

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>
   

Answer 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

Answer 4

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

1. Install npm package

   npm install material-design-icons --save
   

2. Add material icons to your .angular-cli.json

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

3. Use it

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

Answer 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')]

Answer 6

With Bootstrap 4 & Angular this works:

1) Run:

npm install material-design-icons --save

2) Add to styles.css or styles.scss

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

3) Go to: ..\node_modules\material-design-icons\iconfont\material-icons.css and make sure the section is exactly like this ('MaterialIcons-Regular.woff2')...:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('MaterialIcons-Regular.woff2') format('woff2'),
       url('MaterialIcons-Regular.woff') format('woff'),
       url('MaterialIcons-Regular.ttf') format('truetype');
}

4) Use icon in html:

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

Answer 7

Base on @theMayer answer, there is my version to make it work for package @mdi/font.

1- npm install @mdi/font --save

2- In angular.json, under architect/buid/options/styles, add "node_modules/@mdi/font/css/materialdesignicons.min.css"

3- In src\app\app.module.ts add import { MatIconModule } from '@angular/material/icon'; and add MatIconModule in imports section

4- In src\styles.scss add:

$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

5- Add the icon in your html using mat-icon, for example:

<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>

Answer 8

1. Install icons using this command - npm install material-design-icons --save

2. Then add this line in the styles array - "./node_modules/material-design-icons/iconfont/material-icons.css"

Answer 9

1. installlibraries -

npm i --save @angular/cdk @angular/material @angular/animations hammerjs

2. add the below import in styles.css

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

3. inside app.module.ts -

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

3.2 add MatIcomModule in imports array

4. then in your app.component.html

   icons:

   home add_alert

Answer 10

I created the ngx-md-icon component, that allows easy usage of the @mdi/js modules. This benefits from tree shaking, no extra static assets and minimal overhead. https://github.com/btxtiger/ngx-md-icon

// Single icon
<md-icon [icon]="icons.industryVehicle"></md-icon>

// Stack multiple icons
<md-icon [icons]="[icons.industryVehicle, icons.strike]"></md-icon>