Material-UI’s IconButton is a valuable component for rendering clickable icons. In the below example, I will demonstrate how to precisely set the width and height on an IconButton, and contrast that with sizing a ‘regular’ MUI Button that has an icon in it. I will also show styling examples such as background color, border, rounded corners, and alignment.
Here are two examples we will create. The first is an MUI IconButton, while the second is a MUI Button component with mostly default styling and an icon passed to it.
A general rule is that the IconButton has far less default styling than the MUI Button. It also does not have access to button variants, and the size prop seems to behave a bit differently.
Full example code, plus a Code Sandbox link to a live demo, is in the Resources section.
A YouTube video version of this post can be found here, or you can watch the video below:
Material-UI IconButton Size
The MUI IconButton can be sized using the CSS properties size and width within the sx prop. It can also be “sized” using the size prop. Sizing a ‘regular’ MUI Button is almost the same as an IconButton.
The size prop only changes the inner padding. It does not directly change the width or height. By default, the size prop adds the following for IconButtons:
- small – 5px padding
- medium – 8px padding
- large – 12px padding
This is similar to how React-Bootstrap Buttons are sized.
I will focus on width and height applied with the sx prop below.
MUI IconButton Width
Width can be set in a using a variety of CSS values:
- width
- minWidth
- maxWidth
I simply set width: "80%". My favorite alternative is to set a minWidth so that I have control of the UI layout, but there is still a dynamic factor so the IconButton can expand as needed.
Another trick is to wrap the IconButton in a div. The div can be 100% width so that no other elements are on the same horizontal line, but the div is invisible. If your IconButton is less than 50% width but you don’t want other components on the same line, consider this strategy.
As mentioned above, the size prop won’t accomplish what you want. It simply increases padding.
MUI IconButton Height
Height can be set similarly to width. I usually use one of the following:
- height
- maxHeight
- minHeight
I have used maxHeight and minHeight far less than maxWidth and minWidth. If you have difficulty with getting height correct, try using height: max-content. This will detect the size the content of the IconButton requires and set the height accordingly.
Material-UI Icon Size
There are two ways to update the size of the icon: use the fontSize prop available on the icon or set the font-size CSS style. These are both options whether the icon is inside a button or independent of a button.
The fontSize prop accepts three string sizing values with corresponding default rem values, plus it accepts “inherit”:
- “small” – 1.25 rems
- “medium” – 1.5 rems
- “large” – 2.1875 rems
- “inherit” – takes the value from its parent element
The default value is “medium”. The nice thing about the prop is it abstracts the styling into easily readable code.
The styles API or sx prop can be used to pass a specific font size.
Here’s a simplified version of my code for sizing the icon:
<IconButton
>
<Add sx={{ fontSize: "80px" }} />
</IconButton>We can pass pixels, rems, and ems, with whatever value we want, so there is quite a bit of flexibility here. Notice that I set the fontSize at the Add icon level. I attempted it at the IconButton level and it simply had no effect.
I also noticed that MUI sets a unique class on icons inside of IconButtons – MuiSvgIcon-fontSizeMedium. You can see it in the DOM screenshot below.
The class name implies there might be a way to control icon font size using a prop, but if there is it is deeply hidden. I searched the docs and couldn’t find a reference to this class.
Styling Material-UI IconButton
Below I will explore several common styling values for the IconButton. There are significant differences in the default styling for MUI Button and MUI IconButton (learn more here). You can also learn how to add hover styling here.
MUI IconButton Alignment
The Material-UI IconButton can be aligned left, right, or center inside of a parent container. The child Icon can also be aligned inside of the IconButton. Both of these alignments can be accomplished using flex.
Take a look at the styling code below to accomplish both forms of right alignment:
<div
style={{ width: "100%", display: "flex", justifyContent: "flex-end" }}
>
<IconButton
size="large"
aria-label="add"
sx={{display: "flex", justifyContent: "flex-end"}}
>
<Add sx={{ fontSize: "80px" }} />
</IconButton>
</div>The div has display: "flex" and justifyContent: "flex-end" to get the IconButton right aligned within the div. The IconButton has the same styling to get the Add icon right aligned within the IconButton.
MUI IconButton with Border and Rounded Corners
The IconButton starts out with no border and a border radius of 50%. This is because the “button” is supposed to be invisible, and the user perceives a clickable icon.
Tak a look at the below example of adding a border and setting the border radius:
<IconButton
size="large"
aria-label="add"
sx={{border: "4px solid grey", borderRadius: 1}}
>
<Add sx={{ fontSize: "80px" }} />
</IconButton>Border radius of 1 is the same as “4px”. Set the border radius to 0 (or “0px”) if you need perfectly square corners.
I do have a word of caution about setting border and border radius: this makes the IconButton very much like a regular MUI Button with an icon passed to it. If this is what you want, you may be better off using a button and passing an icon like this:
<Button
aria-label="save"
startIcon={<Save />}
>
Test
</Button>The Button has rounded corners by default but can be given square corners by setting borderRadius: 0 (or “0px”).
MUI IconButton Color and Background Color
Text color and background color can be set using the sx prop. In my example I used the following values:
color: "yellow",
backgroundColor: "teal"I am setting the color value at the IconButton level, but it is affecting all children items (in this case, the Icon). The icon is an SVG, and SVGs are styled with the CSS color value just like normal text is.
The icon is not impacted by the background color of the parent IconButton. Interestingly, the Icon itself does not have background color by default, nor does have any transparency value that I saw in dev tools. I can add a background, but if I don’t then the IconButton background is simply visible behind the Icon.
Material-UI Edit/Save/Plus IconButton
MUI has lots of icons available for use with the IconButton. Below I have basic examples of the Add icon, Edit icon, and Save icon used with IconButtons. They are rendered with default IconButton styling.
Notice that the size property is not having any visible impact on the icons. Since the size prop adds padding, it is most visually effective when there is a border.
Resources
These posts are also helpful:
- Complete guides to MUI ‘sx’ prop, styled components, and makeStyles
- The Essential Guide to Material-UI Icon Color
- The Ultimate Material-UI Custom Button Example (MUI v5)
- How to Set MUI Button Size: Width, Height, Margin, Padding, and Font Size
- How to Make Square Buttons and IconButtons in MUI
Full demo code:
import * as React from "react";
import IconButton from "@mui/material/IconButton";
import Button from "@mui/material/Button";
import Add from "@mui/icons-material/Add";
import Save from "@mui/icons-material/Save";
import Edit from "@mui/icons-material/Edit";
const iconButtonStyles = {
width: "60%",
height: "80px",
//fontSize: "80px", not here
marginBottom: 2,
border: "4px solid gray", //no border or fill by default
borderRadius: "4px", //try "0px"
display: "flex",
justifyContent: "flex-end",
color: "yellow",
backgroundColor: "teal"
};
const buttonStyles = {
//width: "80%",
borderRadius: 0
};
export default function StylishIconButton() {
return (
<>
{/* Variant doesn't work on IconButton */}
<div style={{ width: "100%", display: "flex" }}>
<IconButton
size="large"
aria-label="add"
sx={iconButtonStyles}
>
<Add sx={{ fontSize: "80px" }} />
</IconButton>
</div>
<Button
aria-label="save"
sx={buttonStyles}
variant="contained"
size="large"
startIcon={<Save />}
>
Test
</Button>
</>
);
}