title: Angular material mat-icon does not work given that the font is already loaded
body: <p>I am trying to use mat-icon in a navbar component like this </p>
  
  <pre><code>&lt;mat-toolbar&gt;
      &lt;span&gt;&lt;img class="icon" src="../../assets/icon.png" fxFlex="auto"&gt;&lt;/span&gt;
      &lt;span class="fill-space"&gt;&lt;/span&gt;
      &lt;button mat-icon-button&gt;
          &lt;mat-icon aria-label="restart"&gt;mic&lt;/mat-icon&gt;
        &lt;/button&gt;
      &lt;i class="material-icons"&gt;face&lt;/i&gt;
  &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>But instead of an icon, text 'mic' and 'face' show up in the page</p>
  
  <p>I have imported the module in app.module.ts</p>
  
  <pre><code>import {MatCardModule, 
      MatIconModule,
      MatToolbarModule, 
      MatButtonModule, 
      MatFormFieldModule, 
      MatInputModule,
      MatSliderModule,
      MatSnackBarModule, 
      MatTableModule,
      MatTooltipModule,
      MatProgressBarModule,
      } from '@angular/material';
  
  imports: [
      BrowserModule,
      ImageCropperModule,
      BrowserAnimationsModule,
      MatCardModule,
      MatIconModule,
      MatToolbarModule,
      MatButtonModule,
      MatFormFieldModule,
      MatInputModule,
      MatSliderModule,
      MatSnackBarModule,
      MatSlideToggleModule,
      MatTableModule,
      MatTooltipModule,
      MatProgressBarModule,
      ...
  </code></pre>
  
  <p>And the font is loaded as well in index. </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;app&lt;/title&gt;
    &lt;base href="/"&gt;
  
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
        &lt;link href="https://fonts.googleapis.com/css? 
     family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet"&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p>The result is like this:
  <a href="https://i.stack.imgur.com/z9rHe.png" rel="noreferrer">mat-icon not showing</a></p>
  
  <p>The environment:</p>
  
  <pre><code>Angular CLI: 6.0.5
  Node: 8.11.2
  OS: win32 x64
  Angular: 6.0.3
  ... animations, common, compiler, compiler-cli, core, forms
  ... http, language-service, platform-browser
  ... platform-browser-dynamic, router
  
  Package                           Version
  -----------------------------------------------------------
  @angular-devkit/architect         0.6.5
  @angular-devkit/build-angular     0.6.5
  @angular-devkit/build-optimizer   0.6.5
  @angular-devkit/core              0.6.5
  @angular-devkit/schematics        0.6.5
  @angular/cdk                      6.2.0
  @angular/cli                      6.0.5
  @angular/flex-layout              6.0.0-beta.15
  @angular/material                 6.2.0
  @ngtools/webpack                  6.0.5
  @schematics/angular               0.6.5
  @schematics/update                0.6.5
  rxjs                              6.2.0
  typescript                        2.7.2
  webpack                           4.8.3
  </code></pre>
  
  <p>Is there anything I have missed?</p>
  
  <p>Thanks in advance!</p>