Material Ui - Passing Icon As A Prop

I am trying to insert a material-ui icon into my component via prop. Please let me know what I am doing wrong. However, I am not sure how to pass the icon down in JSX, here is my n

Solution 1:

Pass the icon as a component instead of a string as materai-ui icons are ready-made icon components:

importInboxOutlinedIconfrom'materai-ui/...';    

<Categoryicon={<InboxOutlinedIcon />} .../>

in Category component use like this:

constCategory = ({ title, icon, categoryName, todos, toggleComplete, handleDeleteTodo }) => (
<divclassName="td-section"><divclassName="td-category">
        {icon}
        <div>{icon}</div><h2className={categoryName}>{title}</h2><pclassName="td-count">{todos.length} todos</p></div><divclassName="td-list">
            {todos.map(todo => (
                    <Todokey={todo.id}toggleComplete={() => toggleComplete(todo.id)} 
                        onDelete={() => handleDeleteTodo(todo.id)}
                        todo={todo}
                    />
            ))}
    </div></div>
)
exportdefaultCategory