CODEWITHSUNDEEP
angularangular-material
TheUnreal
TheUnreal

Reputation: 24472

Using angular 2 material icons

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?

Upvotes: 22

Views: 45580

Answers (9)

Valentin Bossi
Valentin Bossi

Reputation: 305

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";

Upvotes: 3

Mangesh Ipper
Mangesh Ipper

Reputation: 1

Just add the following line on index.html

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

Upvotes: 0

Malkeet Singh
Malkeet Singh

Reputation: 21

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.

Upvotes: 0

mkaj
mkaj

Reputation: 3489

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

Upvotes: 5

Deepak swain
Deepak swain

Reputation: 3700

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

Upvotes: 11

user991
user991

Reputation: 1369

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

Upvotes: 14

Diana Quintanilla
Diana Quintanilla

Reputation: 1

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]
})

Upvotes: -4

Mcmil
Mcmil

Reputation: 897

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>

Upvotes: 16

Abdulrahman Alsoghayer
Abdulrahman Alsoghayer

Reputation: 16540

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

Upvotes: 32

Related Questions