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>

Answer 3

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');
    }
}

Answer 4

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

Answer 5

In angular 4.3.3 with @angular/material 2.0.0-beta-7 you also need to sanitize the url.

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent
{
    constructor(
        private domSanitizer: DomSanitizer,
        private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.addSvgIcon('twitter', domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/twitter.svg'));
    }
}

Answer 6

To work offline/local(provide css from your server):

1. npm install material-design-icons --save
2. in src/styles.css add @import "~material-design-icons/iconfont/material-icons.css";

Answer 7

This is the way, I tried and it works.

mdIconRegistry.addSvgIcon('slider', sanitizer.bypassSecurityTrustResourceUrl('./assets/controls/slider.svg'));

The instance mdIconRegistry will be available via DI and add custom svg using addSvgIcon method. Then use <md-icon svgIcon="slider"> in your template.

Answer 8

Just add the following line on index.html

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

Answer 9

Also you need to import Http.

import {HTTP_PROVIDERS} from '@angular/http';
import {MdIcon, MdIconRegistry} from  '@angular2-material/icon';
@Component({
    template:`<md-icon>code</md-icon>`
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})