代码之家 › 专栏 › 技术社区 › K. van den Berg

为什么我的Angular材质图标看起来与谷歌字体图标不同?

google-material-icons angular-material angular

K. van den Berg · 技术社区 · 1 年前

我正在做一个Angular 15项目,我注意到我使用的垫子图标组件看起来与谷歌字体图标网站上显示的图标不同( https://fonts.google.com/icons ). 例如,我使用以下代码在我的项目中包含“上传”图标:

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

为了加载图标,我在index.html中添加了以下行:

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

然而,我的应用程序中呈现的图标与谷歌字体图标网站上显示的设计不匹配。

出现在我的Angular项目中的图标:

谷歌字体图标网站上显示的图标:

我想知道为什么外观上有区别。在如何在Angular Material中包含或配置图标方面,我是否缺少了什么?

1 回复 | 直到 1 年前

JSON Derulo 1 年前

材质图标字体有两个不同的版本,您可以在谷歌字体网站的侧边栏“样式”部分进行选择:

在您的应用程序中,您正在使用材质图标,其外观可能与材质符号中的图标不同。有一个 open feature request 对于Angular Material中的官方材质符号支持。

推荐文章

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

Bitan Basak · 使垫子自动完成功能类似于Bootstrap选择

1 年前

user p · 如何修复Angular Material侧边栏的滚动问题

1 年前

K. van den Berg · 为什么我的Angular材质图标看起来与谷歌字体图标不同?

1 年前

Iteration · 列出在关闭前一个元素时不移动的CdkDrag Angular元素

1 年前

Pawan Nogariya · 是否有方法将数据或ngModel附加到材料选项卡上?

1 年前

Johannes Schacht · 如何从材质3的调色板中提取颜色

1 年前

Ben · 如何使用带有部分应用的过滤器功能的角度材质日期选择器?

1 年前

aditya rawat · 在angular is 17中使用angular材质遗留样式会产生此错误

1 年前

Kinjan Koradiya · 使用dir=“rtl”时垫滑块无法正常工作

1 年前