材质图标显示难看

Question

我正在尝试为我的 angular 数据表使用 angular 材料图标。我按照这个 toturial 为我的角度数据表。 我看到相同的代码在他的屏幕上显示一个漂亮的图标，而我在我的屏幕上看到一个丑陋的图标，

这是我的代码。

数据表 css 文件代码。

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

数据表组件 html 文件代码。

.....
.....
<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>
....
....

我的应用模块文件

@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
],...

我已将此链接包含在我的索引中。html

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

为什么我得到一个丑陋的图标，但我的教练却得到了具有相同代码的漂亮图标。 为了得到正确的东西需要做些什么。 您可能会通过所附图片看到我得到的信息。

Answer 1

您必须在 appModule 上导入import MatButtonModule appModule 。

链接到 API 参考

Answer 2

style.css 或 style.scss

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

索引.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">

导入上面一行，就可以看到漂亮的图标了

Answer 3

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

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