reactjs - React Material UI icon passed in props --> to jsx (Typescript)

Question

I use an icon from the library of material UI in React environment. I pass this icon as a property to child react element and I want to render it inside this child.

So if in general you just need to:

import DeleteIcon from '@material-ui/icons/Delete';

...

render(
       <DeleteIcon/>
)

now I got it as a property within the child element, and this is my code for the child:

export const InteractiveListItem: React.FC<{ Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> }> = (props) => {

    return (
        {props.Icon}  ------> not rendered!
    )

How do I "convert" this ovverrideableComponent into acceptable ReactElement?

question from:https://stackoverflow.com/questions/65902214/react-material-ui-icon-passed-in-props-to-jsx-typescript

Answer 1

Make sure you pass props in the right way: Icon={<DeleteIcon />}, as you specified this in your InteractiveListItem component.