How to Reference Google Material-Design-Icons After Npm Install

How to host material icons offline?

Method 2. Self hosting Developer Guide

Download the latest release from github (assets: zip file), unzip, and copy the font folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/releases

You only need to use the font folder from the archive: it contains the icons fonts in the different formats (for multiple browser support) and boilerplate css.

Replace the source in the url attribute of @font-face, with the relative path to the iconfont folder in your local project, (where the font files are located) eg. url("iconfont/MaterialIcons-Regular.ttf")

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

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

NPM / Bower Packages

Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1

Using bower : bower install material-design-icons --save

Using NPM : npm install material-design-icons --save

Material Icons : Alternatively look into Material design icon font and CSS framework for self hosting the icons, from @marella's https://marella.me/material-icons/

Note

It seems google has the project on low maintenance mode. The last
release was, at time of writing, 3 years ago!
There are several issues on GitHub regarding this, but I'd like to
refer to @cyberalien comment on the issue Is this project actively maintained? #951 where it refers several community projects that
forked and continue maintaining material icons.

How to add material icons

You have two solutions.

1) First solution.

Link font element in your index file

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

Or outline version :

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

You can use it in your template

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

2) Solution with material package

You have to install the material package

npm install @angular/material

Reference into app.module

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

use it now

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

Demo :

https://stackblitz.com/edit/angular-psj1hy

How to include material icon library in Angular?

using this link resolved my problem(https://www.npmjs.com/package/material-icons)

npm i material-icons

styles.css

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

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:

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

Use Material Design Icons in NPM Electron React project

I solved it meanwhile by importing the following into the dependencies section within the package.json:

"@material-ui/icons": "4.0.0",

Within a TypeScript React Component I for instance import the following:

import Add from '@material-ui/icons/Add';
import Edit from '@material-ui/icons/Edit';

which I can then use as return value from within the render() method:

<Add />
<Edit />