如何将 angular-fontawesome 与 Angular Material 一起使用？

Question

关于这个主题的现有问题是指如何将 Angular 与 FontAwesome 图标一起使用，答案最好是 Angular FontAwesome。我搜索了两个 repo，并没有真正找到太多使用 angular-fontawesome 的东西。只有旧解决方案的提示。

我知道了。我也在使用 Angular Material 按钮，我的任务是在我的按钮中使用 FontAwesome 图标，这导致我 Material Icons

我不太确定从哪里开始。

前提是我已经按照描述向 angular-fontawesome 添加了一个图标。我有一个带图标的按钮可以使用了，有没有一种标准方法可以用来连接两者？

TLDR：我想使用 Material Icon Button，但我无法使用 Material Icon，只能使用 FontAwesome Icons。我不知道如何实现这一目标。

Answer 1

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

npm add material-design-icons.
接下来，更新“.angular-cli.json”文件，以便在编译应用程序时将 Web 字体包含到“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 项目时，我按照本网站的所有步骤使用垫子图标。更多

你也可以看看这个stackblitz

更新如果你想使用很棒的字体图标，我建议你可以从 guide 开始。它超级简单易用。

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

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

Answer 2

方法 1：Material 图标注册表

Material 允许使用 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，而是在 mat-button 中使用 fa-icon。

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 以确保图标与按钮文本对齐。

如何将 angular-fontawesome 与 Angular Material 一起使用？

How do I use angular-fontawesome with Angular Material?

angular-material2

angular-fontawesome

方法 1：Material 图标注册表

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