How to customize the icons of a Stepper in Material-UI React

How to customize the icons of a Stepper in Material-UI React:

We can customize the icon of each step in a Stepper of Material-UI. Each step icons can be customized using a simple trick.

In this post, I will show to how to customize the Stepper icons with an example program.

StepIconComponent:

StepIconComponent props is used to pass an icon to a StepLabel. We can create a component to show a custom icon and pass it to this props.

import {
  Stepper,
  Step,
  StepLabel,
  makeStyles,
} from "@material-ui/core";
import NoteAddIcon from '@material-ui/icons/NoteAdd';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import AddAlertIcon from '@material-ui/icons/AddAlert';
import clsx from 'clsx';

function App() {
  const useStyles = makeStyles(() => ({
    root: {
      backgroundColor: '#eaeaf0',
      padding: 8,
      borderRadius: '50%'
    },
    active: {
      color: 'red',
    },
    completed: {
      color: 'green',
    },
  }));

  const CustomStepIcon = (props) => {
    const classes = useStyles();
    const { active, completed } = props;

    const stepIcons = {
      1: <NoteAddIcon />,
      2: <AddAPhotoIcon />,
      3: <AddAlertIcon />,
    };

    return (
      <div
        className={clsx(classes.root, {
          [classes.active]: active,
          [classes.completed]: completed,
        })}
      >
        {stepIcons[String(props.icon)]}
      </div>
    );
  };

  return (
    <div style={{ margin: 2 }}>
      <Stepper activeStep={1}>
        <Step>
          <StepLabel StepIconComponent={CustomStepIcon}>Register your name</StepLabel>
        </Step>
        <Step>
          <StepLabel StepIconComponent={CustomStepIcon}>Register your email</StepLabel>
        </Step>
        <Step>
          <StepLabel StepIconComponent={CustomStepIcon}>Click on Finish</StepLabel>
        </Step>
      </Stepper>
    </div>
  );
}

export default App;

• CustomStepIcon is used to show a custom icon.
• stepIcons are the list of icons to show in the stepper.
• By using clsx, we are defining different themes for the icons.

If you run the above code, it will give the below output: