Components: Material design icons not displayed with project created with angular-cli

[eliashdezr]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Display material design icons

What is the current behavior?

Icons are not displayed

What are the steps to reproduce?

http://angular-material-test.azurewebsites.net/

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

These are the dependencies used

  "dependencies": {
    "@angular/animations": "^4.3.0",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/router": "^4.3.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.1",
    "@angular/compiler-cli": "^4.3.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Is there anything else we should know?

Project created with Angular CLI, then followed by the official guide to integrate material2:
https://material.angular.io/guide/getting-started

run ng serve -o and the output is like the reproduction URL

Source files attached.

testing-am.zip

[m98]

First, please consider that you need to insert style into the project:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

If it did not solve the problem, I guess it's because you are using another font and also added !important for the font, please try to add the code below in your style.css (or style.scss) which is the general/public CSS file which effects on your whole project:

md-icon{
  font-family: 'Material Icons' !important;
}

[kara]

Yeah, it seems like the icon font might be missing. This doesn't look like a Material issue, so closing.

[eliashdezr]

@kara @m98

The font was already imported/added to the index.html, as you can see in the repo URL.

I noticed that in the official documentation the md-icon element has these two classes mat-icon material-icons

• https://material.angular.io/components/menu/examples

Something that is not included in my reproduction link:

• http://angular-material-test.azurewebsites.net/

Removing those classes in the official documentation gets the same result I was getting on my reproduction link.

There's no other 3rd party tool involved as you can see in the source I attached. Is there's somewhere else I need to setup something to get those classes automatically injected?

[willshowell]

@eliashdezr glancing through your repro .zip, it doesn't look like you imported MdIconModule into your app

[eliashdezr]

@willshowell
It's working now. Thanks!

[ksiabani]

Building on m98's answer, if you want to use a different font (e.g. a Google Font) you can use the following to avoid messing with Material icons:

body *:not(mat-icon) {
  font-family: $primary-font !important;
}

[jalalh14]

First, please consider that you need to insert style into the project:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

If it did not solve the problem, I guess it's because you are using another font and also added !important for the font, please try to add the code below in your style.css (or style.scss) which is the general/public CSS file which effects on your whole project:

md-icon{
  font-family: 'Material Icons' !important;
}

in new version:

mat-icon{
font-family: 'Material Icons' !important;
}

[501c3]

Experiencing this problem on this version of angular:

@angular-devkit/architect 0.801.0
@angular-devkit/build-angular 0.801.0
@angular-devkit/build-optimizer 0.801.0
@angular-devkit/build-webpack 0.801.0
@angular-devkit/core 8.1.0
@angular-devkit/schematics 8.1.0
@angular/cdk 8.0.2
@angular/material 8.0.2
@ngtools/webpack 8.1.0
@schematics/angular 8.1.0
@schematics/update 0.801.0
rxjs 6.4.0
typescript 3.4.5
webpack 4.35.2

Other notes:
Icons do render correctly on FireFox 68.0.1. They DO NOT render on Chrome 76.0.3809.87. Icons were working on chrome a few days before a software update on my Linux Ubuntu workstation version 18.04

Error message reported in chrome console:
Access to font at 'https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field x-firephp-version is not allowed by Access-Control-Allow-Headers in preflight response.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}