主页 / coding / 问题 / 79584729
Accepted
Carlos Henrique Reis
Asked: 2025-04-21 21:35:35 +0800 CST

如何将 FontAwesome 图标与 Angular Material 19 独立组件一起使用？

  • 772

我正在使用独立组件和Angular Material开发一个 Angular 19 项目。
我想将FontAwesome 图标( @fortawesome/angular-fontawesome) 与 Angular Material 组件一起使用mat-icon，但我不确定如何正确集成它们。

以下是我目前所做的：

/// <reference types="@angular/localize" />

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';

我安装了所需的软件包：

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

但是，我不确定：

  • 如何在独立设置FaIconLibrary中正确注册图标。
  • 如何使用<fa-icon>内部 Angular Material 组件mat-list，如mat-toolbar、等。
  • 是否有一种干净的方法来使用 FontAwesome 图标，mat-icon或者是否<fa-icon>必须单独使用。

任何示例或最佳实践都将受到赞赏！

angular

1 个回答

  1. Best Answer

    使用 Font Awesome 时无需@fortawesome/angular-fontawesome)：

    我按照下面的教程进行操作，效果很好。

    注册 fontawesome 图标以便与材料 MatIcon 一起使用

    安装软件包：

    npm i font-awesome --save

    将样式添加到angular.json：

    "styles": [
    "node_modules/font-awesome/scss/font-awesome.scss",
]

    添加一些样式以使文件中的字体保持一致global-styles.scss。

    .mat-icon.fa {
  font-size: 20px;
}

    然后我们需要添加到的数组MatIconRegistry中，以便我们可以在根组件内对其进行配置。providersbootstrapApplication

    import { MatIconRegistry } from '@angular/material/icon';
...

bootstrapApplication(IconOverviewExample, {
  providers: [
    ...
    MatIconRegistry,
  ],
}).catch((err) => console.error(err));

    然后在根组件中导入MatIconRegistry并配置字体为真棒。

    import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
...
@Component({
  selector: 'icon-overview-example',
  templateUrl: 'icon-overview-example.html',
  imports: [MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconOverviewExample {
  public matIconRegistry: MatIconRegistry = inject(MatIconRegistry);
  constructor() {
    this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

    然后我们可以在 HTML 中使用它们，通过提供fontSet和fontIcon：

    <mat-icon
aria-hidden="false"
aria-label="Example home icon"
fontIcon="home"
></mat-icon>
<mat-icon fontSet="fa" fontIcon="fa-shopping-bag"></mat-icon>

    Stackblitz 演示

    • 1

相关问题