FontAwesome 5在Angular 6中使用Angular Materials进行设置 指示

Question

基线：

• Angular 6.0.3
• 角材料6.4.2
• “@ fortawesome / angular-fontawesome”：“^ 0.1.1”
• “@ fortawesome / fontawesome-svg-core”：“^ 1.2.2”
• “@ fortawesome / free-solid-svg-icons”：“^ 5.2.0” 所以我已经安装了angular-fontawesome，我试图让<mat-icon>指令起作用，但事实并非如此。我不清楚如何注册字体或者我是否也需要。我正在寻找一个例子，其中某人正在使用新的字体 - awesome with angular以及使用<mat-icon>指令获取图标显示所需的内容。如果我按照angular-font-awesome GitHub页面上的说明一切正常，但他们使用的标签如下：<fa-icon icon="coffee"></fa-icon>

有人可以通过设置，所以我可以使用<mat-icon>指令进行渲染。

Answer 1

直接从this link，实施和工作到我的项目，这些是我遵循的步骤。

1. 安装相关的FontAwesome库

   npm i @fortawesome/fontawesome-svg-core
   npm i @fortawesome/free-brands-svg-icons
   npm i @fortawesome/free-regular-svg-icons
   npm i @fortawesome/free-solid-svg-icons

2. 创建图标服务

   import { Injectable } from '@angular/core';
   import { MatIconRegistry } from '@angular/material';
   import { DomSanitizer } from '@angular/platform-browser';
   import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class IconService {
     constructor(private _iconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {}
     addSvg(icon: IconDefinition) {
       const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${icon.icon[0]} ${icon.icon[1]}">
           <path d="${icon.icon[4]}" />
         </svg>`;
   
       this._iconRegistry.getNamedSvgIcon(icon.iconName, icon.prefix).subscribe(
         () => {
           //Ok, icon already exists
         },
         () => {
           //Error, not found, add it
           this._iconRegistry.addSvgIconLiteralInNamespace(
             icon.prefix,
             icon.iconName,
             this._sanitizer.bypassSecurityTrustHtml(svg)
           );
         }
       );
     }
   }

3. 添加您需要的图标，这应该根据需要进行，以防止捆绑膨胀

   // In app.component or relevant component requiring icon
   import { faGoogle } from '@fortawesome/free-brands-svg-icons';
   /*...*/
   constructor(
     _iconService: IconService
   ) {
     _iconService.addSvg(faGoogle); // add icon to library
   }

4. 使用您的图标 <mat-icon svgIcon="fab:google"></mat-icon>