Close
Close full mode
logoWebDevAssist

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:

Material-UI stepper with custom icons
Material-UI stepper with custom icons

Subscribe to our Newsletter

Previous
How to change the Stepper colors in Material-UI React
Next — Typescript for beginners
Typescript Tutorials for beginners