Google Material 图标、轮廓、圆形、双色调、锐利集不起作用答案

【问题标题】：Google Material Icons, Outlined, Rounded, Two-Tone, Sharp sets are not workingGoogle Material 图标、轮廓、圆形、双色调、锐利集不起作用
【发布时间】：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

标签： icons material-design webfonts google-webfonts

【解决方案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";

我相信这回答了你的问题。 “正确答案”总是很好！谢谢！

【讨论】：