How to enlarge the SVG icon in React Material UI icon buttons?

Sometimes, we want to enlarge the SVG icon in React Material UI icon buttons.

In this article, we’ll look at how to enlarge the SVG icon in React Material UI icon buttons.

How to enlarge the SVG icon in React Material UI icon buttons?

To enlarge the SVG icon in React Material UI icon buttons, we can call the makeStyles function.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(() => ({
  deleteIcon1: {
    "& svg": {
      fontSize: 25
    }
  },
  deleteIcon2: {
    "& svg": {
      fontSize: 50
    }
  },
  deleteIcon3: {
    "& svg": {
      fontSize: 75
    }
  },
  deleteIcon4: {
    "& svg": {
      fontSize: 100
    }
  }
}));
export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton className={classes.deleteIcon1}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon2}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon3}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon4}>
        <DeleteIcon />
      </IconButton>
    </div>
  );
}

We call makeStyles with a function that returns the classes with the & svg set to the size of the SVG icon.

We use '& svg' to select the SVG icon and set that to an object with the font size we want.

Then we apply the styles by setting the className of the IconButton to the styles returned by useStyles.

As a result, we should see the icon size being different for each icon.

Conclusion

To enlarge the SVG icon in React Material UI icon buttons, we can call the makeStyles function.