material-ui > 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

🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.