Angular Material - Using svg icons in angular material2 - Angular Material Tutorial

This example shows how to use SVG icons in your app.

Download the SVG iconset / icon (in this case, we're getting the icons from click here.)

Save it under your assets folder or somewhere else which you can access with.

In your app.module.ts, add the following code

import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

export class AppModule {
    constructor(mdIconRegistry: MdIconRegistry, domSanitizer: DomSanitizer){
        // Note that you have to sanitize the resource since Angular will complain that it will cause XSS problems.
        // More info: https://g.co/ng/security#xss               
        mdIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('assets/icons.svg'))
    }
}

Use it via the svgIcon attribute:

<md-icon svgIcon="menu"></md-icon>

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap