如何将Material-UI图标作为Props传入React组件并渲染？

核心逻辑 #

Material Icons本质是React组件，不是普通字符串，所以不能用传递字符串的方式传图标，得直接传递组件本身或者组件类型。

具体实现方案 #

1. 直接传递已渲染的图标组件 #

假设你有个自定义组件CustomCard需要接收图标作为Props：

先在父组件里导入目标图标：

import FavoriteIcon from '@mui/icons-material/Favorite';
import CustomCard from './CustomCard';

然后把图标组件直接传给子组件：

// 父组件渲染代码
<CustomCard headerIcon={<FavoriteIcon />} />

在子组件中直接使用这个Props：

// CustomCard.jsx
export default function CustomCard({ headerIcon }) {
  return (
    <div className="card">
      <div className="card-header">
        {headerIcon}
        <h3>卡片标题</h3>
      </div>
      <div className="card-content">卡片内容</div>
    </div>
  );
}

2. 传递图标组件类型（更灵活） #

如果需要在子组件里控制图标的大小、颜色等样式，可以传递图标组件的类型，而非已渲染好的元素：

父组件中传递组件类型：

import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import CustomButton from './CustomButton';

// 父组件渲染代码
<CustomButton Icon={ShoppingCartIcon} />

子组件中渲染并自定义图标样式：

// CustomButton.jsx
export default function CustomButton({ Icon }) {
  return (
    <button className="action-btn">
      {/* 这里可以直接给图标加props控制样式 */}
      <Icon sx={{ fontSize: 28, color: '#ff4081' }} />
      <span>加入购物车</span>
    </button>
  );
}

3. 避坑提醒：别传字符串 #

你之前用字符串传递失败是正常的，Material Icons不是通过字符串名称来渲染的，以下写法完全无效：

// ❌ 错误示例
<CustomCard headerIcon="FavoriteIcon" />

React没法把字符串映射到对应的图标组件，自然渲染不出图标。

可选优化：添加Props类型校验 #

用PropTypes或TypeScript给图标Props加类型约束，让代码更健壮：

用PropTypes：

import PropTypes from 'prop-types';

CustomCard.propTypes = {
  headerIcon: PropTypes.element,
  Icon: PropTypes.elementType
};

用TypeScript：

import { ElementType, ReactElement } from 'react';

type CustomCardProps = {
  headerIcon?: ReactElement;
  Icon?: ElementType;
};

export default function CustomCard({ headerIcon, Icon }: CustomCardProps) {
  // 组件逻辑
}

内容的提问来源于stack exchange，提问作者Manas RA