Material UI > MUI IconButton

Material UI IconButton

Material UI's IconButton is similar to the Material UI Button except it has a circular ripple designed for a single icon element. Inside the IconButton, we can render various icons. The icons themselves must be imported from a separately installed package called @material-ui/icons. If you do not have this package, or want to know how to install and use these icons, see our tutorial here on Material-UI icons.

The examples below are fairly self-explanatory as the IconButton is pretty similar to the Button, but there are limitations, for example there is no contained variant if you wanted a solid circle icon. If you want an Icon inside of a Button with text, you can instead use the regular Button with the startIcon prop.

Official Docs for Material UI IconButton

IconButton API

Lesson 11/12

import React from "react";
import ReactDOM from "react-dom";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import SmileIcon from "@mui/icons-material/Mood";

function sayHi() {
  console.log("Hello!");
}

function App() {
  return (
    <div>
      <Typography variant="h5">Default IconButton</Typography>
      <IconButton onClick={sayHi}>
        <SmileIcon />
      </IconButton>
      <Typography variant="h5">Primary Color</Typography>
      <IconButton color="primary" onClick={sayHi}>
        <SmileIcon />
      </IconButton>
      <Typography variant="h5">Custom Color</Typography>
      <IconButton sx={{ color: "#ff8833" }} onClick={sayHi}>
        <SmileIcon />
      </IconButton>
      <Typography variant="h5">Small size</Typography>
      <IconButton size="small" onClick={sayHi}>
        <SmileIcon />
      </IconButton>
      <Typography variant="h5">Disabled</Typography>
      <IconButton disabled onClick={sayHi}>
        <SmileIcon />
      </IconButton>
      <Typography variant="h5">Edge start</Typography>
      <IconButton edge="start" onClick={sayHi}>
        <SmileIcon />
      </IconButton>
      <Typography variant="h5">Icon inside Button with label</Typography>
      <Button variant="contained" startIcon={<SmileIcon />}>
        Button
      </Button>
    </div>
  );
}

export default App;

Open Sandbox