如何在TypeScript组件类中使用FortAwesome图标（结合PrimeNG）

我来帮你搞定这个问题！你遇到的情况是因为按需加载模式下，FontAwesome不会全局注入所有图标的CSS类和SVG资源，所以直接用fas fa-arrow-circle-right这种类名写法无法生效。不过我们可以通过结合FortAwesome的图标对象和PrimeNG的自定义模板来解决，步骤如下：

1. 在组件类中导入所需图标对象 #

首先，在你的组件.ts文件里，导入你需要用到的那几个箭头图标（和你在AppModule里导入的一致）：

import { faArrowAltCircleRight, faArrowAltCircleDown, faArrowAltCircleUp, faArrowAltCircleLeft } from '@fortawesome/free-solid-svg-icons';

2. 调整directions数组的结构 #

把原来用字符串类名的icon字段，替换成对应的图标对象：

this.directions = [
  {label: '', value: 'd', icon: faArrowAltCircleRight},
  {label: '', value: 'b', icon: faArrowAltCircleDown},
  {label: '', value: 'h', icon: faArrowAltCircleUp},
  {label: '', value: 'g', icon: faArrowAltCircleLeft}
];

3. 自定义p-selectButton的item模板 #

在模板里，使用PrimeNG的pTemplate来自定义每个选项的渲染方式，直接用<fa-icon>组件来渲染图标（和你之前正常工作的用法一致）：

<p-selectButton [options]="directions" [(ngModel)]="sens">
  <ng-template let-option pTemplate="item">
    <fa-icon [icon]="option.icon"></fa-icon>
  </ng-template>
</p-selectButton>

这样就能正常渲染图标了！因为我们直接使用了已经注册到FaIconLibrary里的图标对象，通过FortAwesome的Angular组件来渲染，完全符合按需加载的使用逻辑。

另外补充一点：如果你不想自定义模板，也可以尝试把icon字段设置成数组格式（比如['fas', 'arrow-alt-circle-right']，也就是和<fa-icon>的[icon]参数格式一致），不过这种方式是否生效取决于PrimeNG的版本支持，所以自定义模板的方式更稳妥可靠。

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