md-icon

Creating an icon

The following is a guide on how to create an icon from material design icons:

Load the icon font from Google CDN in your index.html:

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

Alternatively, you may import it in your styles.css:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Use it as follows:
```
<md-icon>menu</md-icon>
```

You’re done!

Using SVG Icons

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 https://materialdesignicons.com/getting-started.
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>
```