我目前有
<mat-icon>info<mat-icon>
，它给出了填充颜色的信息图标的输出。但是，我只想要图标的轮廓。我该怎么做？
我想要的图标是https://material.io/tools/icons/?icon=info&style=outline而不是https://material.io/tools/icons/?icon=info&style=baseline
答案 0 :(得分：9)
这个问题已经过时了。可以在此处找到更深入，最近的答案：How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
一般的想法是默认情况下不会导入某些图标，需要从不同的库中定位。
您正在寻找<mat-icon>info_outline</mat-icon>。
您可以对具有轮廓图像的任何项目使用相同的模板，但不要尝试将其用于填充/轮廓相同的对象。
e.g。 <mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>
答案 1 :(得分：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。
答案 2 :(得分：2)
您可以包括这个
网址中的private static float OutsideLimitedMove(float current, float move, float bottomLimit, float topLimit)
{
//----->---------| not allowed |---------<-----
// fromBottom -6 6 fromUp
if(current >= -6 && current <= 6)
return 0f;
float predictedY = current + move;
//fromBottom
if(current < bottomLimit && predictedY > bottomLimit)
return Math.Min(bottomLimit - current, move);
//fromUp
if (current > topLimit && predictedY < topLimit)
return Math.Max(topLimit - current, move);
return move;
}
Vector3 predictedMove = Vector3.down * Time.deltaTime * speed;
float y = OutsideLimitedMove(transform.position.y, predictedMove.y, -6, 6);
transform.position += new Vector3(predictedMove.x, y, predictedMove.z);
会在大纲中显示材料图标。
示例：
|Material+Icons+Outlined然后在模板文件中，可以添加@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
material-icons-outlined答案 3 :(得分：1)
将此内容放置在索引文件夹中 “ “
答案 4 :(得分：0)
我不满意，直到知道Google尚未发布其新设计的字体或svg图标集。因此，我整理了一个小的npm软件包来解决该问题。
https://www.npmjs.com/package/ts-material-icons-svg
只需导入要使用的图标，然后将其添加到注册表中。自述文件中包含简短的教程。
干杯Marco