Icons 图标我们提供了一些建议和指导，能够帮助您在 Material-UI 中使用图标。
Material-UI 通过以下三种方式来支持图标的使用：
您可以将标准的 Material Design 图标 导出为 React 组件 (SVG icons)。
或者可以将自定义的 SVG 图标通过 SvgIcon 组件来包装成一个 React 组件。
或者可以将自定义的 font 图标通过 Icon 组件来包装成一个 React 组件。
Material 图标Material Design 已经将 1100 多个官方图标标准化，而每个图标都有五个不同的“主题”(见下文)。 对于每个 SVG 图标，我们从 @ material-ui/icons 包中导出相应的React组件。 您可以 搜索完整的图标列表。
安装请在您的项目目录中用以下方式安装依赖包：
// 通过 npm
npm install @material-ui/icons
// 通过 yarn
yarn add @material-ui/icons
这些组件使用 Material-UI 的 SvgIcon 组件，这样可以通过 SVG 路径来对各个图标进行渲染，因此它们与下一个发布的版本的 Material-UI 具有对等依赖性。
如果你尚未在你的项目中使用 Material-UI，你可以这样添加:
// 用 npm 安装
npm install @material-ui/core
// 用 yarn 安装
yarn add @material-ui/core
使用有两种导入图标的方法：
方法 1:
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
方法 2:
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
当然了，方法 1 比方法 2 安全得多，但是方法 2 提供了最好的开发体验。 在使用第二个方法之前，请确保您遵循 最小化捆绑包大小指南。 我们强烈建议您配置一个 Babel 插件。
其中我们给每个图标配备了一个”主题“：Filled (default)，Outlined，Rounded，Two tone 以及 Sharp。 若您想导入一个不是默认主题的图标组件，在图标名加主题做为后缀即可。 例如，@material-ui/icons/Delete 图标可以：
导出为 Filled 主题（默认值）：@material-ui/icons/Delete，
导出为 Outlined 主题：@material-ui/icons/DeleteOutlined，
导出为 Rounded 主题：@material-ui/icons/DeleteRounded ，
导出为 Twotone 主题：@material-ui/icons/DeleteTwoTone ，
导出为 Sharp 主题：@material-ui/icons/DeleteSharp ，
友情提示：Material Design 在命名图标的时候遵循了 “snake_case” 变量命名法（例如，delete_forever 和 add_a_photo），而 @material-ui/icons 则使用 “PascalCase” 来命名导出的相应图标（例如，DeleteForever 以及 AddAPhoto）。 并且此命名规则有三个特例：3d_rotation 导出为 ThreeDRotation，4k 导出为 FourK，以及 360 导出为 ThreeSixty。