How to change icon size on Alert in Material UI for React

Question

Recently Material UI has developed 'Alert' component.

Everything is fine, excpet he fact that I don't see a way to change the icon size.

This is my code:

<Snackbar open={true}>
  <Alert
    className={classes.cookieAlert}
    severity="info"
    action={<Button color="inherit" size="small">OK</Button>}
  >
    We use cookies to ensure you the best experience on our website.
  </Alert>
</Snackbar>

And the icon is defined by 'severity', how do I change the size of that? I don't want to override the icon, just change its size to bigger.

Answer 1

The size of the icon is controlled by the font size. Below is an example based on your code that shows one way of customizing this.

import React from "react";
import Snackbar from "@material-ui/core/Snackbar";
import Button from "@material-ui/core/Button";
import Alert from "@material-ui/lab/Alert";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  cookieAlert: {
    "& .MuiAlert-icon": {
      fontSize: 40
    }
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <Snackbar open={true}>
      <Alert
        className={classes.cookieAlert}
        severity="info"
        action={
          <Button color="inherit" size="small">
            OK
          </Button>
        }
      >
        We use cookies to ensure you the best experience on our website.
      </Alert>
    </Snackbar>
  );
}

References:

• CSS classes available for overrides (including MuiAlert-icon): https://material-ui.com/api/alert/#css
• Source code for Alert showing how the default font size for the icon is set: https://github.com/mui-org/material-ui/blob/v4.9.0/packages/material-ui-lab/src/Alert/Alert.js#L128