Change the size of the icon - css

Question

I have this project and I want to make a sidebar and inside the sidebar there are icons and a word that expresses this icon, the problem is that when I wanted to change the size of the icon in the “useStyles()” it didn’t change its size and I didn’t know why.
How can I solve this problem?
const useStyles = makeStyles((theme) => ({
item: {
display: "flex",
alignItems: "center",
marginBottom: theme.spacing(4),
[theme.breakpoints.up("sm")]: {
marginBottom: theme.spacing(3),
cursor: "pointer",
},
},
icon: {
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]:{
fontSize: "18px"
}
},
text: {
fontWeight: 500,
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
container: {
height: "100vh",
paddingTop: theme.spacing(2),
color: "white",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.up("sm")]:{
backgroundColor: 'white',
color: '#555',
border: '1px solid #ece7e7'
}
},
}));
const LeftBar = () => {
const classes = useStyles();
return (
<Container className={classes.container}>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
</Container>
);
};
export default LeftBar;

Answer 1

If you want a quick fix, give your icon the sx prop and put your desired font size there.
<Home sx={{fontSize:"18px"}}/>
Otherwise make sure that your import statements are correct.
... from "#mui/material/styles"
Usually I use the mui styled for breakpoints, so something like
const IconWrapper = styled("div")(({ theme }) => ({
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
fontSize: 18,
},
}));
Then implement it like
<IconWrapper>
<Home />
</IconWrapper>