为什么我的 Angular Material 图标看起来与 Google Fonts 图标不同？

Question

我正在开发一个 Angular 15 项目，我注意到我使用的 mat-icon 组件看起来与 Google Fonts Icons 网站 (https://fonts.google.com/) 上显示的图标不同图标）。例如，我使用以下代码在我的项目中包含“上传”图标：

<mat-icon>upload</mat-icon>

要加载图标，我将以下行添加到我的index.html中：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

但是，我的应用程序中呈现的图标与 Google Fonts Icons 网站上显示的设计不匹配。

我的 Angular 项目中显示的图标：

Google Fonts Icons 网站上显示的图标：

我想知道为什么外观上有差异。在 Angular Material 中包含或配置图标的方式中是否缺少某些内容？

Answer 1

Material Icon Font 有两种不同版本，您可以在 Google Fonts 网站的“样式”部分下进行选择：

1. 物质符号
2. 材质图标（您当前在应用程序中使用的图标）

Angular Material 中存在对官方材质符号支持的开放功能请求：https://github.com/angular/components/issues/24845