Angular Material 图标未显示

Question

我正在尝试实现一个基于 Angular Material (v.18.2.x) 的 Web 应用程序，但我看不到图标。这是我的实现：

package.json

[...]
 "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/cdk": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/material": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.5.0",
    "zone.js": "~0.14.0"
  }
[...]

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, RouterOutlet } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { routes } from './app/app.routes';
import { SidebarComponent } from './app/components/sidebar/sidebar.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, SidebarComponent],
  templateUrl: './main.html',
  styleUrl: './main.scss',
})
export class App {}

bootstrapApplication(App, {
  providers: [
    provideRouter(routes),
    provideAnimations()
  ]
});

全局样式.css

@import '@angular/material/prebuilt-themes/indigo-pink.css';

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
[...]

HTML 文件

<mat-cell *matCellDef="let user">
  <button mat-icon-button [routerLink]="['/users', user.id]">
    <mat-icon fontIcon="visibility"></mat-icon>
  </button>
</mat-cell>

结果

输出

我尝试过包含一些依赖项、导入 MatIconModule 或导入 main.scss 一些图标依赖项，但没有成功

Answer 1

确保您已导入材质图标的字体。

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

然后您应该有

MatIconModule

的进口。

@Component({
  selector: 'icon-overview-example',
  templateUrl: 'icon-overview-example.html',
  imports: [MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconOverviewExample {}

HTML 将如下所示。

<mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="home"></mat-icon>

最后，在使用

Angular Material 18

时，您应该确保您拥有为角度材质定义主题的新样式。

@use '@angular/material' as mat;

body {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

html {
  height: 100%;
}

Stackblitz 演示