Using angular 2 material icons

As of @ngModule introduction starting from Angular RC5 syntax would be as follow:

app-example-module.ts

import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';

@NgModule({
    imports: [
        MdIconModule
    ]
    providers: [
        MdIconRegistry
    ]
})

export class AppExampleModule {
    //
}

app-example-component.ts

@Component({

    selector: 'app-header',
    template: `<md-icon svgIcon="close"></md-icon>`
})


export class AppExampleComponent
{
    constructor(private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('close', '/icons/navigation/ic_close_36px.svg');
    }
}

It's worth to know that to use an icon space separated (for example file upload) we need to use underscore _ . For example:

<md-icon>file_upload</md-icon>

inside style.css copy and paste the following:---

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

and use like:

<md-icon>menu</md-icon>
          ^--- icon name

In order to use MdIcon, you need to include the corresponding css files. In your code, you are using the default font which is Material Icons from google.

From angular-material2 repo:

By default the Material icons font is used. (You will still need to include the HTML to load the font and its CSS, as described in the link).

Simply, just include the css in index.html like this:

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

Or you can choose any other method of importing mentioned in the official repo:

http://google.github.io/material-design-icons/#icon-font-for-the-web