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

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

[willshowell]

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