以下是我通常的做法：

import React from 'react';
import AppsOutageIcon from '@mui/icons-material/AppsOutage';

const AnotherComponent = (props) => (
  <div>
    Here is my passed icon: {props.icon}
  </div>
);

function App() {
  return (
    <div className="App">
      <AnotherComponent icon={<AppsOutageIcon />} />
    </div>
  );
}

如果将导入的图标直接作为 prop 传递给另一个组件并尝试渲染它，将遇到以下错误：

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.

要解决这个问题，您需要首先示例化组件，将导入的图标 Package 为一个标记，如<AppsOutageIcon />，而不是仅使用AppsOutageIcon。