如何使用 Angular 材料（如 Angular.io/resources 网站）插入社交图标？答案

【问题标题】：How to insert social icons using Angular Material like the Angular.io/resources site?如何使用 Angular 材料（如 Angular.io/resources 网站）插入社交图标？
【发布时间】：2020-02-12 04:01:00
【问题描述】：

我已经安装了 Angular Material，并且能够通过简单地导入材料模块并使用 mat-icon 元素来使用图标：

<mat-icon>mood</mat-icon>

但是，我想使用像 angular.io/resources 网站上的社交图标。

当我检查元素时，他们似乎正在使用 path 元素的 d 属性值绘制 svg，但是我不确定 Angular 社区通常如何获取这些数据值，是否有开发人员使用的标准资源而不是乏味的自己画出来的任务？目前我只是求助于复制和粘贴 d 值哈哈，但是我想知道是否有开发人员使用的更实用的方法。

【问题讨论】：

标签： angular svg angular-material

【解决方案1】：

所有 Material 图标都是开源的。

转到 Material Icons 网站。
点击一个图标。
点击页面左下角的 SVG 下载链接。

或者单击“git 存储库”的链接。您可以在其中浏览源代码库并下载部分或全部图标。

【讨论】：

【解决方案2】：

创建一个 svg 文件（inkscape、illustrator）或下载它并像这样在服务中注册：

@Injectable({providedIn: 'root'})
export class MaterialIconsService {
    constructor(private iconRegistry: MatIconRegistry,
                private sanitizer: DomSanitizer) {
        this.iconRegistry.addSvgIcon('my-icon', this.sanitizer.bypassSecurityTrustResourceUrl('assets/path/my-icon.svg');
    }
}

然后你可以在你的html中使用它

<mat-icon svgIcon="my-icon"></mat-icon>

【讨论】：

您好，我知道这一点，但我想知道是否有 SVG 数据图的免费源代码库，如上图所示，用于社区倾向于使用的图标 - 而不是创建 svg 文件与诸如 twitter、github 等社交图标之类的常见事物在一起。
我喜欢使用素材图标或字体图标。否则你也可以在 google 上搜索 svg 图标？