title: Error retrieving icon: Unable to find icon with the name ":done"
body: <p>This is my first time using Angular Material, I am having an issue with mat-icons.</p>
  
  <p>my index.html has:
  <code>&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;</code></p>
  
  <p>In my shared module, I have the icons imported:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import {
      MatButtonModule,
      MatCardModule,
      MatIconModule,
      MatMenuModule,
      MatToolbarModule,
  } from '@angular/material';
  
  @NgModule({
      imports: [
          CommonModule,
          MatButtonModule,
          MatCardModule,
          MatIconModule,
          MatMenuModule,
          MatToolbarModule
      ],
      exports: [
          MatButtonModule,
          MatCardModule,
          MatIconModule,
          MatMenuModule,
          MatToolbarModule
      ],
      declarations: []
  })
  export class SharedModule { }
  </code></pre>
  
  <p>then I import the SharedModule into my LoginModule:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { SharedModule } from '../../shared/shared.module';
  import { LoginRoutingModule } from './login.routing.module';
  import { LoginContainerComponent } from './login-container/login-container.component';
  import { LoginViewComponent } from './login-view/login-view.component';
  
  @NgModule({
      imports: [
          CommonModule,
          LoginRoutingModule,
          SharedModule
      ],
      declarations: [
          LoginContainerComponent,
          LoginViewComponent
      ]
  })
  
  export class LoginModule { }
  </code></pre>
  
  <p>finally I go to use the mat-icon in the view:</p>
  
  <pre><code>&lt;mat-card&gt;
      &lt;mat-card-title-group&gt;
          &lt;mat-card-title&gt;
              Welcome to Track-It
          &lt;/mat-card-title&gt;
          &lt;mat-card-subtitle&gt;
              In order to use all of Track-it's goodness, please login...
          &lt;/mat-card-subtitle&gt;
      &lt;/mat-card-title-group&gt;
      &lt;mat-card-content&gt;
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime quod labore autem. Sunt expedita ullam quis in deserunt rem eum, quas culpa quo aut eius consequuntur magni. Voluptates, mollitia ullam.
      &lt;/mat-card-content&gt;
      &lt;mat-card-actions [align]="'end'"&gt;
          &lt;button mat-flat-button&gt;
              Login&amp;nbsp;
              &lt;mat-icon svgIcon="done"&gt;&lt;/mat-icon&gt;
          &lt;/button&gt;
      &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>Hover with this I get the following error:
  <code>Error retrieving icon: Unable to find icon with the name ":done"</code></p>
  
  <p>I am by no means new to Angular, but definately new to Angular Material, so not to sure what is happening here. What I have above should be working. Thoughts?</p>