reactjsmaterial-ui

How to change the size of an icon in Material UI 4.0?


I tried with fontSize and with height and width but it doesn't work.

Example:

/*Component code */
    <Tooltip title="Disminuir cuotas">
          <IconButton
            className={clsx(classes.quotaIcons, classes.minusIcon, {
              [classes.quotaIconsRight]: buttonsToTheRight
            })}
            size="small"
            color="primary"
            onClick={() => handleBillingsNumber('minus')}
          >
            <RemoveIcon />
          </IconButton>
        </Tooltip>
/*Component code */

    const useStyles = makeStyles(theme => ({
      quotaIcons: {
        fontSize: 32,
        color: theme.palette.primary.main
      },
      minusIcon: {
        marginRight: theme.spacing(2)
      },
      quotaIconsRight: {
        fontSize: 8
      },
    });

Solution

  • Use fontSize="inherit" prop in your icon component from @material-ui/icons, then the way we can see above will work.

    <RemoveIcon fontSize="inherit"/>