angular - 如何更改 mat-icon 笔画宽度

Question

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

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

例子

manage_accounts 图标的厚度与球体相同
(我正在使用 class="material-icons-outlined" 来获得 Logo 的轮廓版本)

Answer 1

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

所有素材图标都是谷歌字体，因此您可以使用CSS属性更改大小和笔划font-size和 font-weight , 但也有一些限制。

如果您使用的是Angular Material(mat-icon)。

这样的话，如果你打开index.html你会在那里找到:

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

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

所以使用方式，例如:font-weight: 200 , 拒绝使用<mat-icon></mat-icon>并将其替换为 Material 图标 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 调整其大小。属性(property)。

此外，您还可以将更多参数传递给字体链接，更多详细信息在这里: 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>