Icon (字体图标)

图标使用 Material UI 图标的指南和建议。

Material UI 通过三种方式提供图标支持

通过导出为 React 组件（SVG 图标）的 Material 图标。

通过 SvgIcon 组件，一个用于自定义 SVG 图标的 React 包装器。

通过 Icon 组件，一个用于自定义字体图标的 React 包装器。

Material SVG 图标Google 创建了超过 2,100 个官方 Material 图标，每个图标有五种不同的“主题”（见下文）。对于每个 SVG 图标，我们从 @mui/icons-material 包中导出相应的 React 组件。您可以搜索这些图标的完整列表。

安装运行以下命令之一来安装它并将其保存到您的 package.json 依赖项中

npmpnpmyarnnpm install @mui/icons-material这些组件使用 Material UI SvgIcon 组件来渲染每个图标的 SVG 路径，因此对 @mui/material 具有对等依赖。

如果您的项目中尚未使用 Material UI，您可以按照安装指南添加它。

用法使用以下两个选项之一导入图标

选项 1

import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

import ThreeDRotation from '@mui/icons-material/ThreeDRotation';

复制已复制(或 $keyC)

选项 2

import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';

复制已复制(或 $keyC)

对于 bundle 大小而言，选项 1 是最安全的，但一些开发者更喜欢选项 2。在使用第二种方法之前，请确保您遵循最小化 bundle 大小指南。

每个 Material 图标也都有一个“主题”：Filled（默认）、Outlined、Rounded、Two-tone 和 Sharp。要导入具有默认主题以外主题的图标组件，请将主题名称附加到图标名称。例如，具有以下主题的 @mui/icons-material/Delete 图标：

Filled 主题（默认）导出为 @mui/icons-material/Delete,

Outlined 主题导出为 @mui/icons-material/DeleteOutlined,

Rounded 主题导出为 @mui/icons-material/DeleteRounded,

Two-tone 主题导出为 @mui/icons-material/DeleteTwoTone,

Sharp 主题导出为 @mui/icons-material/DeleteSharp。

Material Design 指南使用“snake_case”命名（例如 delete_forever、add_a_photo）来命名图标，而 @mui/icons-material 使用“PascalCase”命名（例如 DeleteForever、AddAPhoto）导出相应的图标。此命名规则有三个例外：3d_rotation 导出为 ThreeDRotation，4k 导出为 FourK，以及 360 导出为 ThreeSixty。

Filled

Outlined

Rounded

Two Tone

Sharp

边缘情况

SvgIcon如果您需要自定义 SVG 图标（在 Material 图标中不可用），您可以使用 SvgIcon 包装器。此组件扩展了原生

它具有内置的可访问性。

SVG 元素应缩放为 24x24px 视口，以便生成的图标可以直接使用，或作为子元素包含在其他使用图标的 Material UI 组件中。可以使用 viewBox 属性自定义此设置。要从原始图像继承 viewBox 值，可以使用 inheritViewBox 属性。

默认情况下，组件继承当前颜色。可选地，您可以使用 color 属性应用主题颜色之一。

它支持

{/* credit: cog icon from https://heroicons.com */}

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

strokeWidth={1.5}

stroke="currentColor"

>

strokeLinecap="round"

strokeLinejoin="round"

d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"

/>

按 Enter 开始编辑颜色

按 Enter 开始编辑尺寸

按 Enter 开始编辑组件属性即使您的图标以 .svg 格式保存，您也可以使用 SvgIcon 包装器。svgr 具有加载器，用于导入 SVG 文件并将它们用作 React 组件。例如，使用 webpack

// webpack.config.js

{

test: /\.svg$/,

use: ['@svgr/webpack'],

}

// ---

import StarIcon from './star.svg';

复制已复制(或 $keyC)

也可以将其与“url-loader”或“file-loader”一起使用。这是 Create React App 使用的方法。

// webpack.config.js

{

test: /\.svg$/,

use: ['@svgr/webpack', 'url-loader'],

}

// ---

import { ReactComponent as StarIcon } from './star.svg';

复制已复制(或 $keyC)

createSvgIconcreateSvgIcon 实用程序组件用于创建 Material 图标。它可用于包装

const HomeIcon = createSvgIcon(

,

'Home',

);

// or with custom SVG

const PlusIcon = createSvgIcon(

xmlns="http://www.w3.org/2000/svg"

fill="none"

viewBox="0 0 24 24"

strokeWidth={1.5}

stroke="currentColor"

className="h-6 w-6"

>

,

'Plus',

);

复制已复制(或 $keyC)

按 Enter 开始编辑Font Awesome如果您发现从 @fortawesome/react-fontawesome 使用 FontAwesomeIcon 时存在布局问题，您可以尝试将 Font Awesome SVG 数据直接传递给 SvgIcon。

以下是 FontAwesomeIcon 组件和包装的 SvgIcon 组件的比较。

示例示例

}>

Example

}>

Example

按 Enter 开始编辑FontAwesomeIcon 的 fullWidth 属性也可用于近似正确的尺寸，但它并不完美。

其他库MDImaterialdesignicons.com 提供了超过 2,000 个图标。对于所需的图标，复制他们提供的 SVG path，并将其用作 SvgIcon 组件的子元素，或与 createSvgIcon() 一起使用。

注意：mdi-material-ui 已经使用 SvgIcon 组件包装了这些 SVG 图标中的每一个，因此您无需自己进行操作。

Icon (字体图标)Icon 组件将显示来自任何支持连字的字体图标的图标。作为先决条件，您必须包含一个，例如您项目中的 Material Icons 字体。要使用图标，只需使用 Icon 组件包装图标名称（字体连字），例如

import Icon from '@mui/material/Icon';

star;

复制已复制(或 $keyC)

默认情况下，Icon 将继承当前文本颜色。可选地，您可以使用主题颜色属性之一设置图标颜色：primary、secondary、action、error 和 disabled。

字体 Material 图标Icon 默认情况下将为 Material Icons 字体（filled 变体）设置正确的基类名称。您所需要做的就是加载字体，例如，通过 Google Web Fonts

rel="stylesheet"

href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons"

/>

复制已复制(或 $keyC)

add_circleadd_circleadd_circleadd_circleadd_circleadd_circle

add_circle

add_circle

add_circle

add_circle按 Enter 开始编辑自定义字体对于其他字体，您可以使用 baseClassName 属性自定义基线类名称。例如，您可以使用 Material Design 显示 two-tone 图标

import Icon from '@mui/material/Icon';

rel="stylesheet"

href="https://fonts.googleapis.ac.cn/css?family=Material+Icons+Two+Tone"

// Import the two tones MD variant ^^^^^^^^

/>;

复制已复制(或 $keyC)

add_circle

sx={[isDarkMode && { filter: 'invert(1)' }]}

baseClassName="material-icons-two-tone"

>

add_circle

按 Enter 开始编辑全局基类名称为每个组件用法修改 baseClassName 属性是重复的。您可以使用主题全局更改默认属性

const theme = createTheme({

components: {

MuiIcon: {

defaultProps: {

// Replace the `material-icons` default value.

baseClassName: 'material-icons-two-tone',

},

},

},

});

复制已复制(或 $keyC)

然后，您可以直接使用 two-tone 字体

add_circle

复制已复制(或 $keyC)

Font AwesomeFont Awesome 可以与 Icon 组件一起使用，如下所示

baseClassName="fas"

className="fa-plus-circle"

sx={{ color: green[500] }}

/>

按 Enter 开始编辑请注意，Font Awesome 图标的设计方式与 Material 图标不同（比较之前的两个演示）。fa 图标被裁剪以使用所有可用空间。您可以使用全局覆盖来调整此设置

const theme = createTheme({

components: {

MuiIcon: {

styleOverrides: {

root: {

// Match 24px = 3 * 2 + 1.125 * 16

boxSizing: 'content-box',

padding: 3,

fontSize: '1.125rem',

},

},

},

},

});

复制已复制(或 $keyC)

呼叫我呼叫我

} label="Call me" />

} label="Call me" />

按 Enter 开始编辑字体与 SVG：应使用哪种方法？两种方法都可以正常工作，但是，在性能和渲染质量方面存在一些细微的差异。在可能的情况下，首选 SVG，因为它允许代码拆分，支持更多图标，并且渲染速度更快、质量更高。

有关更多详细信息，请查看 GitHub 为什么从字体图标迁移到 SVG 图标。

可访问性图标可以传达各种有意义的信息，因此确保它们在适当的情况下可访问非常重要。您需要考虑两种用例

装饰性图标仅用于视觉或品牌强化。如果从页面中删除它们，用户仍然可以理解并能够使用您的页面。

语义图标是您用于传达含义的图标，而不仅仅是纯粹的装饰。这包括旁边没有文本的图标，这些图标用作交互式控件——按钮、表单元素、切换等。

装饰性图标如果您的图标纯粹是装饰性的，那么您已经完成了！添加了 aria-hidden=true 属性，以便您的图标可以正确访问（不可见）。

语义图标语义 SVG 图标您应该包含具有有意义值的 titleAccess 属性。添加了 role="img" 属性和