What specific type should I use when passing Material UI Icons as props to a component?
import {OverridableComponent} from "@mui/material/OverridableComponent";
import {SvgIconTypeMap} from "@mui/material";
interface IconButtonProps {
children: OverridableComponent<SvgIconTypeMap<{}, "svg">> & {muiName: string};
disabled?: boolean;
}
const IconButton = ({
children,
disabled = false,
}: IconButtonProps) => {
return (
<Button
disabled={disabled}>
{children}
</Button>
)
}
If I try to use it like this:
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
<IconButton><AddCircleOutlineIcon/></IconButton>
I encounter the following error:
Type 'Element' is not assignable to type 'OverridableComponent<SvgIconTypeMap<{}, "svg">>'. Type 'Element' provides no match for the signature '<C extends ElementType>(props: { component: C; } & { children?: ReactNode; classes?: Partial | undefined; color?: "disabled" | ... 8 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & DistributiveOmit<...>): Element | null'.
I also attempted:
import {SvgIconComponent} from "@mui/icons-material";
children: SvgIconComponent;
but received the same error message.