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.

delete node module and install again. – Darshan Malani Dec 30 '20 at 06:14 — Darshan Malani, Dec 30 '20 at 06:14

score 2 · Answer 1 · edited Sep 04 '21 at 19:37

2

you must import import MatButtonModule on your appModule.

Link to API reference

edited Sep 04 '21 at 19:37

Muhammad Dyas Yaskur

6,914
10
48
73

answered Sep 04 '21 at 12:37

Ezequiel Zarate

21
2

Murugan · Answer 2 · 2020-12-30T07:07:19.127

0

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

edited Dec 30 '20 at 07:07

answered Dec 30 '20 at 06:16

Murugan

615
5
19

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; – Murugan Dec 30 '20 at 06:32
I still get the same ugly one. altough I import it, reinstalled my angular material with selecting the deeppurple theme,... – Talib Daryabi Dec 30 '20 at 06:47
I have updated my answer. Please check it now – Murugan Dec 30 '20 at 07:07

score 0 · Answer 3 · answered Dec 30 '20 at 07:57

0

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

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

answered Dec 30 '20 at 07:57

Pinaki

792
8
17

material icon displays ugly

3 Answers3