Question

我在那里尝试使用Material Icons from google。我从来没有遇到任何问题，但自从他们更新后，我无法找到关于如何使用概述集的答案。有些人工作但有些人没有。

例如，我试图使用 大纲集 中的account_circle图标，但无法弄清楚如何！

https://material.io/tools/icons/?search=account%20circ&icon=account_circle&style=outline

欢迎任何帮助。我最后一件事是通过Google Web Fonts加载Material Icons。

问候。

Answer 1

截至 2021 年更新

简而言之，Google 并没有（仍然）宣传您可以通过 Material Icons 网站上的 Google Apis url 加载不同集合的事实。根据 Google Material Icons instructions，它们只是讨论默认填充集，它使用以下 html 标签将 Material Icons 基础 stylesheet 排入队列。

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

如果您想使用轮廓、双色调、圆形或锐利设置，您需要将以下内容添加到 Material Icons url。

<头>

主题	网址参数	CSS 类
已填充（默认）	`?family=Material+Icons`	`material-icons`
大纲	`?family=Material+Icons+Outlined`	`material-icons-outlined`
两种色调	`?family=Material+Icons+Two+Tone`	`material-icons-two-tone`
圆形	`?family=Material+Icons+Round`	`material-icons-round`
锐利	`?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

您还可以在文档的 <link rel="preconnect" 中指定 <head> 标签以提高加载性能。

<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>

Answer 2

更新，并提供答案：

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

我相信这可以回答您的问题。一个“正确答案”总是好的！谢谢！

材料图标大纲图标不起作用

2 个答案:

截至 2021 年更新

更好的表现

示例