39

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!

  • 1
    Extended icons are supported here. Follow the instructions given in the answer above by Edric. The latest path for getting the mdi.svg is here. – Paresh Patil May 11 '19 at 9:12
33

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:

    Documentation <code>assets</code> folder

  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>
    

Update

I've changed the instructions so that it will work for later versions.

|improve this answer|||||
  • 1
    Thanks you very much :D – BOT Axel Aug 18 '17 at 17:52
  • 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 – Rice Junkie Sep 23 '17 at 1:35
  • 2
    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 Feb 7 '18 at 15:41
  • 2
    MatIconModule * – tatsu Feb 7 '18 at 15:55
  • 1
    Isn't there a way to use the font instead of SVG? It's a lot smaller. – MK10 Apr 19 '18 at 11:10
66

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.

|improve this answer|||||
  • Thanks! This was exactly what I was looking for. – Boldizsar May 9 '19 at 17:26
  • 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 . – Rin and Len Aug 8 '19 at 12:54
  • The question was asking about Material Design Icons by Templarian, NOT the ones provided by Google (material-design-icons on NPM). – Sam Claus Dec 24 '19 at 1:51
17

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

|improve this answer|||||
  • 1
    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 ? – bvdb Jan 21 '19 at 13:37
  • @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 Dec 24 '19 at 1:37
15

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>
    
|improve this answer|||||
  • 2
    OP doesn't use Google Material Design Icons. He uses MaterialDesignIcons by Templarian. – Edric Feb 8 '18 at 13:17
  • 1
    which is the best way to include material icon, include it into scss file or into angular-cli.json ? – thekingtn Mar 5 '18 at 20:39
6

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')]
|improve this answer|||||
3

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>
|improve this answer|||||
1

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>
|improve this answer|||||
0
  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"

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.