Can you pass different Material-ui icons as props? - reactjs

Question

I am wondering how I would add different Icons? This is what I have so far but the icon does not show in my UI?
my props thought that would work
When I add the Facebook button it doesn't show like it does on the button I added
const Item = ({ name = 'Item Name', tags = [] }, icon) => {
return (
<Grid item xs={12} spacing={2}>
<Paper elevation={6}>
<Grid container justifyContent="flex-start" spacing={3}>
<Grid item xs={12}>
{/*Notice the name is in {} since it is a variable*/}
<h1>{name}</h1>
{icon}
<div>{icon}</div>
</Grid>
<Grid item>
{tags.map((tag, idx) => {
return <Chip key={idx} label={tag} color={'secondary'} />;
})}
</Grid>
<Grid item>
<Button endIcon={<FacebookIcon />} color="primary" variant="contained">
Button 1
</Button>
<Button color="secondary" variant="contained">
Button 2
</Button>
</Grid>
</Grid>
</Paper>
</Grid>
);
};
const MyView = () => {
return (
<Widget>
<Grid container spacing={4}>
<Item icon={<FacebookIcon />} name={jsonData.name} tags={jsonData.tags} />
<Item name="test paper" tag={'chip2'}></Item>
<Item name={jsonData.name} tags={jsonData.tags} />
</Grid>
</Widget>
);
};
export default MyView;

Answer 1

your mistake is there const Item = ({name="Item Name", tags=[],icon} ) => {
you must import icon from the props object not like a parameter. you should notice that Item was not used like a function with parameter and it is a react component :
import FacebookOutlinedIcon from '#mui/icons-material/FacebookOutlined';
const Item = ({name="Item Name", tags=[],icon} ) => {
return (
<>
<Grid item xs={12} spacing={2}>
<Paper elevation={6}>
<Grid container justifyContent="flex-start" spacing={3}>
<Grid item xs={12}>
{/*Notice the name is in {} since it is a variable*/}
<h1>{name}</h1>
{icon}
<div>{icon}</div>
</Grid>
</Grid>
</Paper>
</Grid>
</>
)
}
const Add = (props) => {
return (
<Item icon={<FacebookOutlinedIcon/>} name="test" tags={[]}/>
);
};
export default Add;