如何合并不在 Google Material for Angular 中的图标？

Posted 2023-02-22

【中文标题】如何合并不在 Google Material for Angular 中的图标？

【英文标题】：How to incorporate an icon that is not in Google Material for Angular?

【发布时间】：2019-05-01 12:37:47

【问题描述】：

要为 Angular 使用 Material 图标，<mat-icon> 与图标名称一起使用：

<mat-icon>check</mat-icon>

图标可以在这里找到：https://material.io/tools/icons/?style=baseline

现在的问题是这个图标集缺少很多图标。例如，那里找不到 Instagram 图标。

在这些情况下，一种方法是退回到图标字体并在您的 html 页面中包含更多图标字体，并为此使用旧的 <i> 元素。

但这是代码异味，因为您的代码库现在有两种方法用于一个目的。

你如何解决这个问题？您如何合并 Google Material for Angular 中不存在的图标？如何扩展 Google Material 图标？

【参考方案1】：

您可以在自己的项目中使用 google-icon npm 包。

看看link。

【参考方案2】：

如果您检查 Angular Material 提供的 API，您可以使用 MatIconRegistry（参考：https://material.angular.io/components/icon/api#MatIconRegistry）添加您自己的图标以使用相同的符号（使用 mat-icon）。