Google Material 图标、轮廓、圆形、双色调、锐利集不起作用
Posted
技术标签:
【中文标题】Google Material 图标、轮廓、圆形、双色调、锐利集不起作用【英文标题】：Google Material Icons, Outlined, Rounded, Two-Tone, Sharp sets are not working 【发布时间】：2018-10-20 15:12:44 【问题描述】：我正在尝试使用刚刚出现的Material Icons font from Google Outlined set，但我无法弄清楚。没有信息也没有文档。 有些图标显示为实心，有些则显示为轮廓。
例如：来自 Outlined set
的account_circle 图标
您应该如何使用 Outlined 集？感谢您的帮助。
【问题讨论】：
是的，你有理由将 Filled style 选项切换到 Outline style不要更改所有图标的外观。示例：Filled icons //\\Outlined icons 【参考方案1】：2021 年更新
简而言之，Google 并没有（仍然）宣传您可以通过 Material Icons 网站上的 Google API 网址加载不同的集合。根据Google Material Icons instructions，它们只是在谈论使用以下html 标签将Material Icons base stylesheet 排入队列的默认填充集。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
如果您想使用轮廓、双色调、圆形或锐利集，您需要将以下内容添加到 Material Icons url。
| Theme | URL parameters | CSS class |
|---|---|---|
| Filled (Default) | ?family=Material+Icons |
material-icons |
| Outlined | ?family=Material+Icons+Outlined |
material-icons-outlined |
| Two Tone | ?family=Material+Icons+Two+Tone |
material-icons-two-tone |
| Round | ?family=Material+Icons+Round |
material-icons-round |
| Sharp | ?family=Material+Icons+Sharp |
material-icons-sharp |
更好的表现
与 Google 基于文本的字体一样，Google Material Icons 也接受 &display=swap url 参数。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
您可以了解更多关于&display=swap@https://developers.google.com/web/updates/2016/02/font-display
您还可以在文档的<head> 中指定<link rel="preconnect" 标签以提高加载性能。
<link rel="preconnect" href="https://fonts.gstatic.com">
示例
<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>【讨论】：
【参考方案2】：更新，答案：
看源码中的Readme，https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons
您将大纲附加到图标名称。所以对你来说：
import AccountCircleOutline from "@material-ui/icons";
或
import AccountCircleOutline from "@material-ui/icons/AccountCircleOutline";
我相信这回答了你的问题。 “正确答案”总是很好！谢谢！
【讨论】：
以上是关于Google Material 图标、轮廓、圆形、双色调、锐利集不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何让 Angular Material Icon 在我的 Angular 应用程序中显示轮廓？
如何合并不在 Google Material for Angular 中的图标？