Icons not being displayed in Angular Material List - html

Question

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.
I believe I have all the important imports to the module. The code below shows
the material design components I imported:
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 { }
Based on examples I've seen on the Internet, I have the following HTML for my
display:
<mat-nav-list>
<mat-list-item *ngFor="let names of userNames">
<div matLine>{{ names }}</div>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
Note that userNames is (currently) just an array of strings.
My code is similar to the code shown below, which is taken from an example at
https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html
<h5>Complex Nav List</h5>
<mat-nav-list>
<mat-list-item *ngFor="let link of links">
<a matLine href="javascript:void(0)">{{ link }}</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
The display from the example is shown in the picture below:
Unfortunately, what I am seeing instead is a button and text:
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.
Can someone tell me what I am missing here? How can I get my list to properly display
the icons in my list?

Answer 1

You need to import Material Icons fonts into your project.
In index.html, add the following code.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Since you are using mat-icon-button, you also need to import MatButtonModule into your AppModule imports.

Answer 2

You appear to be missing the MatButtonModule in your AppModule's imports.