如何在React项目中正确使用Material UI图标？求从安装到组件使用的清晰指南

算力阿峰

2026-7-22

Material UI 图标使用指南 + 术语澄清

一、先理清你困惑的术语

Material Icons：Google官方Material Design规范下的图标集合，MUI的@mui/icons-material包就是把这些图标封装成了可直接使用的React组件，每个图标对应一个独立组件（比如Google、Facebook）。
SVG Icons：MUI中的所有图标本质都是SVG格式的React组件，相比字体图标，它支持直接通过props自定义颜色、尺寸、描边等样式，无需额外处理字体文件。
Icons（MUI语境）：泛指MUI提供的图标方案，既包括@mui/icons-material里的官方Material图标，也包括用@mui/material/Icon组件包裹的自定义SVG图标。

二、从安装到使用的完整流程

1. 安装依赖

你之前的安装命令没问题，确保在React项目根目录执行：

npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

2. 导入图标组件

每个图标都是单独的默认导出，直接导入你需要的即可：

import GoogleIcon from '@mui/icons-material/Google';
import FacebookIcon from '@mui/icons-material/Facebook';

3. 在组件中正确渲染

你之前的问题核心就在这里：必须把图标作为JSX标签渲染，而不是直接写变量名。正确写法示例：

function LoginButtons() {
  return (
    <div>
      {/* 基础用法 */}
      <GoogleIcon />
      <FacebookIcon />

      {/* 自定义样式：通过props调整大小、颜色 */}
      <GoogleIcon sx={{ fontSize: 32, color: '#DB4437' }} />
      <FacebookIcon sx={{ fontSize: 32, color: '#4267B2' }} />

      {/* 和MUI按钮结合使用 */}
      <Button startIcon={<GoogleIcon />} variant="contained" color="error">
        用Google登录
      </Button>
    </div>
  );
}

export default LoginButtons;