Angular Material v18.2.x离线应用图标不显示问题求助

基于Angular Material v18.2.x开发离线Web应用时，mat-icon无法正常显示，尝试过添加依赖、导入MatIconModule、在样式文件引入图标依赖等操作均未解决。以下是问题细节及针对性解决方案：

实现细节 #

依赖配置（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()
  ]
});

全局样式（global_styles.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>

解决方案 #

1. 独立组件模式下正确导入MatIconModule #

由于使用独立组件架构，需在直接使用mat-icon的组件（如表格组件、SidebarComponent）中显式导入MatIconModule及关联模块：

// 示例：用户表格组件
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-user-table',
  standalone: true,
  imports: [
    // 其他业务模块
    MatIconModule,
    MatButtonModule
  ],
  templateUrl: './user-table.component.html'
})
export class UserTableComponent {}

2. 适配离线环境的图标资源配置 #

Angular Material默认依赖远程Google Fonts字体，离线场景需切换为本地资源：

方案一：本地引入Material Icons字体

• 下载Material Icons字体文件，放入项目assets/fonts目录
• 在global_styles.css中添加字体声明：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/MaterialIcons-Regular.woff2') format('woff2'),
       url('../assets/fonts/MaterialIcons-Regular.woff') format('woff'),
       url('../assets/fonts/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

方案二：使用SVG图标（推荐离线场景）

• 将SVG图标文件（如visibility.svg）放入assets/icons目录
• 在main.ts中配置本地SVG图标：

import { provideIcons } from '@angular/material/icon';
import { visibilityIcon } from './assets/icons/visibility.svg'; // 按实际路径调整

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

• HTML中使用SVG图标：

<mat-icon svgIcon="visibility"></mat-icon>

3. 统一Angular版本 #

当前依赖声明为^18.1.0，但开发基于v18.2.x，建议统一版本避免兼容性问题：

"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/cdk": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/material": "^18.2.0",
"@angular/router": "^18.2.0"

执行npm install更新依赖。

4. 确认全局样式加载 #

检查angular.json的styles数组，确保global_styles.css已正确引入：

"styles": [
  "src/global_styles.css"
]

内容的提问来源于stack exchange，提问作者Pablo