如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓？

Posted 2023-02-22

【中文标题】如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓？

【英文标题】：How can I get Angular Material Icon to show the outline in my Angular app?

【发布时间】：2018-10-25 18:37:00

【问题描述】：

我现在有

<mat-icon>info<mat-icon>

它给出了填充颜色的信息图标的输出。但是，我只想要图标的轮廓。我该怎么做？

我想要的图标是https://material.io/tools/icons/?icon=info&style=outline而不是https://material.io/tools/icons/?icon=info&style=baseline

【问题讨论】：

How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?的可能重复

【参考方案1】：

你可以包括这个 |Material+Icons+Outlined在url中以大纲显示材料图标。

例子：

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

然后在模板文件中，可以添加material-icons-outlined

<mat-icon class="material-icons-outlined">home</mat-icon>

【参考方案2】：

编辑：5/2019

这个问题已经过时了。可以在此处找到更深入的最新答案：How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

一般的想法是默认情况下不导入某些图标，需要从不同的库中定位。

---

原答案：

您正在寻找<mat-icon>info_outline</mat-icon>。

您可以对具有轮廓图像的任何项目使用相同的模板，但不要尝试将其用于填充/轮廓相同的对象。

例如<mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>

【讨论】：

谢谢！我试图在名称前加上“大纲”。

当图标名称具有复杂名称时，这对我不起作用

也对我不起作用，特别是对于 edit_outline 图标。谢尔曼的回答虽然效果很好

问题并不过时，您提供的链接是关于使用材料设计的，与角材料 AFAICS 无关。

> 这不是 Angular 或 Material 特定的问题哦，但这是。它有相应的标签，并且在标题和问题本身中特别提到了角度材料。

【参考方案3】：

我就是这样做的：

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

<mat-icon fontSet="material-icons-outlined">edit</mat-icon>

找到解决方案here。

【参考方案4】：

把它放在索引文件夹中 " "

编辑

【参考方案5】：

索引.html

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

在 e.q. 中列出所有 mat-icon应用模块

export class AppModule  
  constructor(iconRegistry: MatIconRegistry) 
    iconRegistry.setDefaultFontSetClass('material-icons-outlined');
  

【讨论】：

这就是我要找的。在一处进行更改以在填充和轮廓之间快速切换。

【参考方案6】：

直到知道 Google 还没有将他们的新设计发布为字体或 svg 图标集，我才感到不满意。因此我整理了一个小的 npm 包来解决这个问题。

https://www.npmjs.com/package/ts-material-icons-svg

只需导入您想使用的图标并将它们添加到您的注册表中。自述文件中有简短教程。

马可干杯