Question

有关此主题的现有问题是关于如何将Angular与FontAwesome图标一起使用的，答案是Angular FontAwesome。我搜索了两个回购协议，但是使用angular-fontawesome并没有发现太多。只有旧解决方案的提示。

所以我知道了。我还使用了Angular Material Buttons，我的任务是在Buttons中使用FontAwesome Icons，这使我进入Material Icons

我不太确定从哪里开始。

提供我已如上所述将图标添加到angular-fontawesome。我有一个带有图标的按钮可以使用了，有一种标准方法可以将两者连接起来？

TLDR：我想使用Material Icon Button，但是我无法使用Material Icon，而不得不使用FontAwesome Icons。我不知道该如何实现。

Answer 1

方法1：材质图标注册表

材料允许将custom SVG icons及其组件（如mat-button）使用。 FontAwesome图标也是SVG，因此您可以使用此机制来解决手头的任务。

// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '@fortawesome/free-brands-svg-icons';
import { icon } from '@fortawesome/fontawesome-svg-core';

// 4. Use with `mat-icon` component in your template
@Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
  constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
    // 2. Render icon into SVG string
    const svg = icon(faFontAwesomeFlag).html.join('');
    // 3. Register custom SVG icon in `MatIconRegistry`
    registry.addSvgIconLiteral(
      'font-awesome', 
      sanitizer.bypassSecurityTrustHtml(svg)
    );
  }
}

也请检查this issue以获得更轻量级实现的说明。

方法2：使用angular-fontawesome库中的fa-icon组件

由于您似乎已经在应用程序中使用@fortawesome/angular-fontawesome包，因此可以避免完全使用mat-icon，而在fa-icon内使用mat-button。

import { faFontAwesomeFlag } from '@fortawesome/free-brands-svg-icons';

@Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
  faFontAwesomeFlag = faFontAwesomeFlag;
}

请注意，您还需要将FontAwesomeModule添加到imports才能起作用。有关更多详细信息，请参见documentation。

以下是使用两种方法进行演示的示例：https://stackblitz.com/edit/components-issue-8znrc5

请注意，我还必须添加一些CSS以确保图标与按钮文本对齐。

Answer 2

转到您的项目目录并运行此命令以安装google material图标包

npm add material-design-icons。
接下来，在编译应用程序后，更新“ .angular-cli.json”文件以将网络字体包含在“ index.html”页面中：

{ styles: [ "./assets/fonts/material-icons/material-icons.css" ] }
最后，您可以通过使用以下内容更新主应用程序模板来测试字体：

<h1>Material Icons</h1> <i class="material-icons">account_circle</i> <i class="material-icons">thumb_up</i>

您可以参考此site。在创建angular 6项目时，我遵循了该站点的所有步骤以使用mat-icons。更多

您也可以检出此stackblitz

更新如果您想使用字体很棒的图标，建议您先遵循此guide。超级简单易用。

使用命令npm install --save font-awesome angular-font-awesome.安装真棒字体依赖项之后，导入模块：

import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }

如何在Angular Material中使用angular-fontawesome？

2 个答案:

方法1：材质图标注册表

方法2：使用angular-fontawesome库中的fa-icon组件