Style Mapped Material-UI Icons with the Same Styles (React) - reactjs

Question

Without adding a className or style tag to each object with a material-ui icon element, what's the best way to style each icon if each icon has the same style?
const btns = [
{ name: "test1", icon: <Icon1 />, link: "test1" },
{ name: "test2", icon: <Icon2 />, link: "test2" },
{
name: "test3",
icon: <Icon3 />,
link: "test3",
},
{ name: "test4", icon: <Icon4 />, link: "test4" },
{ name: "test5", icon: <Icon5 />, link: "test5" },
{ name: "test6", icon: <Icon6 />, link: "test6" },
{ name: "test7", icon: <Icon7 />, link: "test7" },
{ name: "test8", icon: <Icon8 /> },
];
const LeftNav = () => {
const classes = useStyles();
return (
<div className="leftNavContainerStyle">
{btns.map((btn) => {
return (
<Button className={classes.navBtnContainer} color="primary">
{btn.icon} //add the same style to each icon.
{btn.name}
</Button>
);
})}
</div>
);
};
export default LeftNav;
Ive tried changing each icon key to: { name: "test1", icon: Icon1, link: "test1" }, and then changing btn.icon to <btn.icon/> and adding a style like <btn.icon style={styles}/>, but this errors out.
Any help would be appreciated!

Answer 1

You could use the React.cloneElement function and then just pass in the style when it gets cloned. So something like this
{btns.map((btn) => {
return (
<Button className={classes.navBtnContainer} color="primary">
{React.cloneElement(btn.icon, {
// pass in any new props into this object
className={...}
})}
{btn.name}
</Button>
);
})}

Answer 2

Finally figured it out,
import { SvgIcon } from "#material-ui/core"; //import SvgIcon
const btns = [
{ name: "test1", icon: Icon1, link: "test1" },//remove tags from icon components
{ name: "test2", icon: Icon2, link: "test2" },
{
name: "test3",
icon: Icon3,
link: "test3",
},
{ name: "test4", icon: Icon4, link: "test4" },
{ name: "test5", icon: Icon5, link: "test5" },
{ name: "test6", icon: Icon6, link: "test6" },
{ name: "test7", icon: Icon7, link: "test7" },
{ name: "test8", icon: Icon8 },
];
const LeftNav = () => {
const classes = useStyles();
return (
<div className="leftNavContainerStyle">
{btns.map((btn) => {
return (
<Button className={classes.navBtnContainer} color="primary"> //use the component from SvgIcon
<SvgIcon component={btn.icon} className="whateverclassyouwant" />
{btn.name}
</Button>
);
})}
</div>
);
};
export default LeftNav;