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?

Did you investigate the resulting DOM. How does it look like? — Günter Zöchbauer
– Günter Zöchbauer, Commented May 12, 2016 at 17:35
I'm sorry @GünterZöchbauer, I don't understand what do you mean by that. — TheUnreal
– TheUnreal, Commented May 12, 2016 at 17:36
Open browser devtools and check how the result DOM looks like. I guess the icon-demo is somewhere available online as well. You can compare the DOM of the icon in your application and the one in the demo. Maybe it gives some hint what might have went wrong. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 12, 2016 at 17:38
This should be closed. The answers are extremely out of date and misleading at this point. — Ben Racicot
– Ben Racicot, Commented Oct 11, 2017 at 19:20
@BenRacicot Even if the question is closed because of the number of votes on both the question and answer it would still hang around. If the answers are wrong then downvote and/or comment on the wrong answers and/or post your own answer that is correct. There is no reason to vote to close a question because the answers or wrong — Dijkgraaf
– Dijkgraaf, Commented Oct 11, 2017 at 19:54

Abdulrahman Alsoghayer · Accepted Answer · 2016-11-09 23:01:37Z

32

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

edited Nov 9, 2016 at 23:01

answered May 13, 2016 at 2:04

Abdulrahman Alsoghayer

16.6k7 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

redfox05 Over a year ago

Does this still apply with the move to a singular @angular/material?

Abdulrahman Alsoghayer Over a year ago

@redfox05 yes it does, I updated the documentation link in the answer.

Dazag Over a year ago

If you are using some type of autoreload/compiling, like angular-cli (ng serve), remember cancel de service and relaunch ng serve

arraintxo Over a year ago

This works with the Material Icons font, but doesn't seem to work with the SVG icon set as the questioner was trying to do. Did anyone achieve this functionality?

Tim Gautier · Accepted Answer · 2016-12-22 17:47:30Z

16

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>

edited Dec 22, 2016 at 17:47

Tim Gautier

30.3k5 gold badges50 silver badges53 bronze badges

answered Dec 10, 2016 at 21:38

Mcmil

91711 silver badges26 bronze badges

2 Comments

isherwood Over a year ago

Good advice, but this doesn't answer the question.

Glenn Dayton Over a year ago

Definitely helpful thanks Milso, nowhere does it say to replace spaces with underscores.

Edric · Accepted Answer · 2017-03-02 19:02:33Z

14

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

edited Mar 2, 2017 at 19:02

Edric

27.2k13 gold badges88 silver badges97 bronze badges

answered Oct 18, 2016 at 19:19

user991

1,3693 gold badges25 silver badges45 bronze badges

1 Comment

jemiloii Over a year ago

my man, this is what I was looking for!!! as a heads up to others, you can import from @angular/material now

isherwood · Accepted Answer · 2017-07-25 21:00:28Z

11

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

edited Jul 25, 2017 at 21:00

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Dec 20, 2016 at 9:51

Deepak swain

3,7081 gold badge33 silver badges26 bronze badges

Comments

mkaj · Accepted Answer · 2017-08-26 23:30:00Z

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

answered Aug 26, 2017 at 23:30

mkaj

3,4891 gold badge33 silver badges23 bronze badges

Comments

Valentin Bossi · Accepted Answer · 2018-11-25 11:34:06Z

3

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

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

edited Nov 25, 2018 at 11:34

answered Mar 30, 2018 at 12:44

Valentin Bossi

3114 silver badges12 bronze badges

Comments

Stephen Rauch · Accepted Answer · 2017-12-07 04:07:34Z

0

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.

edited Dec 7, 2017 at 4:07

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Dec 7, 2017 at 3:43

Malkeet Singh

213 bronze badges

Comments

jps · Accepted Answer · 2018-04-11 07:12:06Z

0

Just add the following line on index.html

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

edited Apr 11, 2018 at 7:12

jps

22.9k18 gold badges91 silver badges120 bronze badges

answered Apr 11, 2018 at 5:59

Mangesh Ipper

1

Comments

Edric · Accepted Answer · 2017-03-02 17:12:27Z

-3

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

edited Mar 2, 2017 at 17:12

Edric

27.2k13 gold badges88 silver badges97 bronze badges

answered Aug 10, 2016 at 21:00

Diana Quintanilla

1

1 Comment

Nick Saunders Over a year ago

Would you please explain further? With the new NgModule API, this doesn't seem right to me...

Collectives™ on Stack Overflow

Using angular 2 material icons

9 Answers 9

4 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related