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