Angular 如何使用matIconRegistry和fontawesome for facebook图标？

我知道有几种方法可以做到这一点，但我正在尝试按照这里的指示

我的app.module.ts中有这个

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

  imports: [
    MatIconModule,

  providers: [
    MatIconRegistry,

在特定的模块中

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”库中吗？还是我还遗漏了什么？

终于找到了答案！正如我所怀疑的，当我说，“不知何故，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”

---

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

将其中的一部分画出来。。。如果您从materials.angular.io站点复制/粘贴示例代码，您会得到“svgIcon=”，但要导入并使用一些令人敬畏的字体，它必须是“fontIcon=”。然而，这仍然没有解决facebook图标的问题。它现在显示的是代码而不是图像。。。F0 82

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