使用“material-icons”的正确方法是什么？答案

【问题标题】：what is the right way to use `material-icons`?使用“material-icons”的正确方法是什么？
【发布时间】：2019-10-16 15:59:26
【问题描述】：

我在我的反应项目中使用material-ui。我发现有两种不同的方式来使用他们的图标。

一个来自这个网站：https://material.io/tools/icons/?icon=3d_rotation&style=baseline。您可以通过单击下载左侧面板上的图标。或者你可以在你的项目中安装material-design-icons。

另一种方法是像这样导入它们：

import SearchIcon from '@material-ui/icons/Search';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
import Close from '@material-ui/icons/Close'

我想知道它们是一样的吗？或者有什么不同？

【问题讨论】：

标签： material-design material-ui

【解决方案1】：

如果您使用 Material-UI，我（和他们）建议使用它们的方式是使用 SVGIcons，@material-ui/icons 包。我通常会在您发布的那个网站上查找图标，然后从@material-ui/icons 中提取它们。

例如，在该网站上，您会看到一个名为 alarm_on 的名称，您可以从该软件包中导入它，例如 import YourIcon from '@material-ui/icons/AlarmOn'。

我喜欢这样做而不使用图标字体的原因是，当连接不良的人尝试加载您的应用程序时，图标甚至可能无法加载，并且他们会在纯文本中看到丑陋的“alarm_on”，其中图标是。

Take a look at the usage section here.

【讨论】：