angular-material2 md-icon Using SVG Icons

Example

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

1. Download the SVG iconset / icon (in this case, we're getting the icons from https://materialdesignicons.com/getting-started.

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

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

4. Use it via the svgIcon attribute:

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