MUI Icons used in shared React component library won't render: Error: Element type is invalid: expected a string or a class/function but got: object

Question

I've created a monorepo with a shared component library, but when I import components from that library that contain a MUI icon from @mui/icons-material I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is what I get when I console.log() an imported Icon

import AddIcon from '@mui/icons-material/Save';
console.log(AddIcon)

{
  default: {
    '$$typeof': Symbol(react.memo),
    type: { '$$typeof': Symbol(react.forward_ref), render: [Function] },
    compare: null
  }
}

Everything else in the shared components is working fine, including the regular MUI components, and the icons work normally if I'm just adding them directly to my project so I can't figure out why they break in the shared components.

I have "@mui/icons-material": "^5.6.1" in the peerDependencies of my shared library and "@mui/icons-material": "^5.6.1" as a dependency in the project that I'm importing the shared components to.

Answer 1

Ran into the same issue using MUI with the turbo repo design starter (tsup). I don't like this hack, but it does appear to work.

import SaveBase from '@mui/icons-material/Save';
import SvgIcon from '@mui/material/SvgIcon/SvgIcon';

const normalizeIcon = (Icon: typeof SvgIcon) => {
  return ((Icon as any).default ? (Icon as any).default : Icon) as typeof SvgIcon;
};

const SaveIcon = normalizeIcon(SaveBase);

<SaveIcon />