如何将 matIconRegistry 和 fontawesome 用于 Facebook 图标？

Question

我知道有几种方法可以做到这一点，但我正在尝试按照此处的说明进行操作...

https://material.angular.io/components/icon/examples

我的 app.module.ts 中有这个…

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

  imports: [
    MatIconModule,

  providers: [
    MatIconRegistry,

在特定的模块 ts…

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


constructor(public matIconRegistry: MatIconRegistry ) {
              matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
               }

为什么这行代码有效...

    <mat-icon fontSet="fa" fontIcon="fa-times-circle" class="facebook-icon"></mat-icon>

而这行代码失败了？

    <mat-icon fontSet="fa" svgIcon="fa-facebook-square" class="facebook-icon"></mat-icon>

他们都是免费的。 facebook 图标是不是在上面声明的标准“fontawesome”库中？ 或者还有什么我想念的吗？

Answer 1

终于想通了！ 正如我在说的时候怀疑的那样，“facebook 图标是不是在上面声明的标准 'fontawesome' 库中没有？还是我还缺少其他东西？”

在构造函数的末尾，您将这段代码...

..., public matIconRegistry: MatIconRegistry ) 
              {
                matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
              }

我正在查看我的 angular.json 文件，并窥探了以下内容......

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
      "src/styles.scss"
    ],

啊哈！ 有多组库，其中一个被命名为“fontawesome”……一时兴起，我尝试在构造函数中添加以下内容……

..., public matIconRegistry: MatIconRegistry ) 
              {
                matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
                matIconRegistry.registerFontClassAlias('brands', 'fab');}

              }

然后，当我使用图标时，我将“b”添加到“fa”...

    <mat-icon fontSet="fab" fontIcon="fa-facebook-square" class="facebook-icon"></mat-icon>

好极了！ 现在它起作用了。 您可以注册您可能需要的任何其他库。 顺便说一句，当您查看特定图标的字体真棒页面时，会提示正确的库。 查看左上角，就在图标名称下方，您会看到类似这样的内容：“品牌风格”。