css - 如何合并一个不在 Google Material for Angular 中的图标？

Question

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

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

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

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

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

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

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

Answer 1

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