title: Icons not being displayed in Angular Material List
body: <p>I am attempting to display a list of the names of users of my application. Included 
  in the display is supposed to be an icon button which will perform some action
  when pressed. I am using Angular Material components.</p>
  
  <p>I believe I have all the important imports to the module. The code below shows
  the material design components I imported:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { MatListModule } from '@angular/material/list';
  import { MatToolbarModule,
           MatCardModule,
  } from '@angular/material';
  import { routeCmp } from './app.router';
  import { NewuserModule } from './newuser/newuser.module';
  import {MatIconModule} from '@angular/material';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  import { AppComponent } from './app.component';
  import { MainComponent } from './main/main.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      MainComponent,
    ],
    imports: [
      BrowserModule,
      MatToolbarModule,
      MatCardModule,
      MatListModule,
      MatIconModule,
      BrowserAnimationsModule
    ],
    // the rest of the code omitted for brevity
  })
  export class AppModule { }
  </code></pre>
  
  <p>Based on examples I've seen on the Internet, I have the following HTML for my 
  display:</p>
  
  <pre><code>&lt;mat-nav-list&gt;
      &lt;mat-list-item *ngFor="let names of userNames"&gt;
          &lt;div matLine&gt;{{ names }}&lt;/div&gt;
          &lt;button mat-icon-button&gt;
              &lt;mat-icon&gt;info&lt;/mat-icon&gt;
          &lt;/button&gt;
      &lt;/mat-list-item&gt;
  &lt;/mat-nav-list&gt;
  </code></pre>
  
  <p>Note that userNames is (currently) just an array of strings.</p>
  
  <p>My code is similar to the code shown below, which is taken from an example at
  <a href="https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html</a></p>
  
  <pre><code>&lt;h5&gt;Complex Nav List&lt;/h5&gt;
  &lt;mat-nav-list&gt;
      &lt;mat-list-item *ngFor="let link of links"&gt;
          &lt;a matLine href="javascript:void(0)"&gt;{{ link }}&lt;/a&gt;
          &lt;button mat-icon-button&gt;
              &lt;mat-icon&gt;info&lt;/mat-icon&gt;
           &lt;/button&gt;
      &lt;/mat-list-item&gt;
  &lt;/mat-nav-list&gt;
  </code></pre>
  
  <p>The display from the example is shown in the picture below:</p>
  
  <p><a href="https://i.stack.imgur.com/aKTXI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aKTXI.jpg" alt="Good icon display"></a></p>
  
  <p>Unfortunately, what I am seeing instead is a button and text:</p>
  
  <p><a href="https://i.stack.imgur.com/0LYim.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0LYim.jpg" alt="enter image description here"></a></p>
  
  <p>Obviously, I am missing something. There is something not described in the example  that
  makes it work. I did try recreating the example code in my own development setup, based
  on what I downloaded from the site. The example code failed to properly display the 
  icon in my environment.</p>
  
  <p>Can someone tell me what I am missing here? How can I get my list to properly display
  the icons in my list?</p>