Google Material 图标、轮廓、圆角、双色调、尖锐集不起作用

Question

我正在尝试使用刚刚出来的Material Icons font from Google Outlined set，但我无法弄清楚。没有信息也没有文档。一些图标显示为已填充，一些图标显示为轮廓。

例如：Outlined set

中的 account_circle 图标

您应该如何使用大纲集？感谢您的帮助。

Answer 1

更新，回答：

查看源代码中的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";

我相信这回答了您的问题。 "correct answer" 总是很好！谢谢！

Answer 2

2021 年更新

简而言之，Google 并未（仍然）宣传这样一个事实，即您可以通过 Material 图标网站上的 Google API url 加载不同的集合.根据 Google Material Icons instructions，它们只是在谈论默认填充集，它使用以下 html 标记来排队 Material 图标基础 stylesheet。

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

如果你想使用 Outlined、Two Tone、Round 或 Sharp 集，你需要将以下内容添加到 Material 图标 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 图标也接受 &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>

Google Material 图标、轮廓、圆角、双色调、尖锐集不起作用

Google Material Icons, Outlined, Rounded, Two-Tone, Sharp sets are not working

icons

webfonts

google-webfonts

material-design

2021 年更新

更好的表现

例子