material icon displays ugly

Question

I am trying to follow to use angular material icon for my angular data table.I follow this toturial for my angualar data table. I see the same code displays a beautiful icon in his screen whereas I get an ugly icon on my screen,

here is my code.

datatable css file code.

.full-width-table {
  width: 100%;
}

datatable component html file code.

.....
.....
<ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-icon-button><mat-icon>launch</mat-icon></button>
        <!-- <button mat-icon-button color="warn"><mat-icon>delete_outline</mat-icon></button> -->
      </mat-cell>
    </ng-container>
....
....

my appModule file

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AppAsideModule,
    AppBreadcrumbModule.forRoot(),
    AppFooterModule,
    AppHeaderModule,
    AppSidebarModule,
    PerfectScrollbarModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    SelectDropDownModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    CollapseModule,
    HttpClientModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatIconModule
],...

I have included this links in my index.html

<link rel="shortcut icon" href="assets/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

why I get an ugly icon but my toturial instructor get beautiful icon with the same code. what things required to do in order to get the right one. you may see what I get via attached picture.

Answer 1

you must import import MatButtonModule on your appModule .

Link to API reference

Answer 2

style.css or style.scss

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Index.html

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Import the above line and you can see the beautiful icon

Answer 3

<button mat-mini-fab color="warn" aria-label="">
    <mat-icon>filter_list</mat-icon>
</button>

Ref Url - https://material.angular.io/components/button/overview