我如何使用角度材料与角度材料？

Question

关于这个主题的现有问题涉及如何使用Angular和FontAwesome图标，答案是理想的Angular FontAwesome。我搜索了两个回购，并没有真正找到使用angular-fontawesome。只有旧解决方案的提示。

所以我有。我也使用Angular Material Buttons，我的任务是使用我的按钮中的FontAwesome图标，这导致我Material Icons

我不确定从哪里开始。

如上所述，我已经为angular-fontawesome添加了一个Icon。我有一个带有图标的按钮准备就绪，有一种标准方法可以用来连接两者吗？

TLDR：我想使用Material Icon Button，但我无法使用Material Icon而必须使用FontAwesome Icons代替。我不知道如何实现这一目标。

Answer 1

Approach 1: Material icon registry

材料允许使用qazxsw poi及其组件（如qazxsw poi）。 Font Awesome图标也是SVG，因此您可以使用此机制来解决手头的任务。

custom SVG icons

还要检查mat-button以获得更轻量级的实现的描述。

Approach 2: Use fa-icon component from angular-fontawesome library

由于你似乎已经在你的应用程序中使用

// 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并在@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

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

Answer 2

1. 转到项目目录并运行此命令以安装Google材料图标包 documentation。
2. 接下来，更新“.angular-cli.json”文件，以便在编译应用程序时将Web字体包含在“index.html”页面中： https://stackblitz.com/edit/components-issue-8znrc5
3. 最后，您可以通过使用以下内容更新主应用程序模板来测试字体： npm add material-design-icons

你可以参考这个qazxsw poi。当我创建angular 6项目时，我按照本网站的所有步骤使用mat-icons。更多

你也可以看看这个

{
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安装font-awesome依赖项之后导入模块：

stackblitz