CODEWITHSUNDEEP
cssreactjsmaterial-ui
Hiba Youssef
Hiba Youssef

Reputation: 1382

Change the size of the icon

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;

Upvotes: 2

Views: 1566

Answers (1)

Zachary Buce
Zachary Buce

Reputation: 160

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>

Upvotes: 2

Related Questions