如何更改垫子图标笔划宽度

Question

我将自定义图标与带有角度的默认垫子图标一起使用。然而，与我创建的图标相比，垫子图标有点太厚了。

我知道这些图标被视为字体，但是是否可以像更改 svg 的笔划一样更改它？

例子

图标manage_accounts将具有与球体相同的厚度
（我使用class="material-icons-outlined"来获得徽标的轮廓版本）

Answer 1

经过我的研究，我只发现了这些。

font-size所有材质图标均为 Google 字体，因此您可以使用 CSS 属性和来更改大小和描边font-weight，但有一些限制。

如果您使用的是角度材质（垫子图标）。

这样，如果你打开index.html你会发现：

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

它font-family仅提供font-weight: normal (400)，因此您不能将其权重更改为小于 400。

所以使用的方式，对于 ex: font-weight: 200，就是拒绝使用<mat-icon></mat-icon>并用材质图标替换它https://fonts.google.com/icons。

您所需要做的就是替换index.html链接到您想要使用的字体并提供字体粗细参数wght@200

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@200" />

然后在你的组件中将实现更改为

<span class="material-symbols-outlined">invert_colors</span>

因此，通过这种实现方式，您将拥有一个更细的图标，您可以使用该font-size属性调整其大小。

此外，您可以将更多参数传递给字体链接，更多详细信息请参见： https: //developers.google.com/fonts/docs/material_symbols

如果您注册自定义 svg，那么里面mat-icon将是您的 svg，那么您可以尝试添加stroke和stroke-width属性。

<mat-icon style="stroke-width: 0.1; stroke: aqua" [svgIcon]="'custom-svg'"></mat-icon>