Using angular 2 material icons

Question

I'm trying to use angular material 2 to display icons on my website, but I'm a little confused.

This is how it's supposed to work, from the demo in github repo of material 2:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

I've been trying to use it but no icons are shown at all.

This is how I set it up:

app.component.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';  @Component({   ...   encapsulation: ViewEncapsulation.None,   viewProviders: [MdIconRegistry],   directives: [MdIcon], }) export class MyComponent{   constructor(private router: Router,               private JwtService:JwtService,               mdIconRegistry: MdIconRegistry){     mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')   } } 

and the template..

<md-icon>home</md-icon> 

The page loads with no errors, but no icon is shown. What could have gone wrong?

Answer 1

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

Answer 2

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>