#Material icon plus how to
#Material icon plus update
#Material icon plus code
#Material icon plus plus

The icon is not impacted by the background color of the parent IconButton. The icon is an SVG, and SVGs are styled with the CSS color value just like normal text is. I am setting the color value at the IconButton level, but it is affecting all children items (in this case, the Icon). In my example I used the following values: color: 'yellow', Text color and background color can be set using the sx prop. MUI IconButton Color and Background Color The Button has rounded corners by default but can be given square corners by setting borderRadius: 0 (or “0px”). If this is what you want, you may be better off using a button and passing an icon like this: } 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. Set the border radius to 0 (or “0px”) if you need perfectly square corners. Tak a look at the below example of adding a border and setting the border radius: īorder radius of 1 is the same as “4px”. This is because the “button” is supposed to be invisible, and the user perceives a clickable icon. The IconButton starts out with no border and a border radius of 50%. Right aligned MUI IconButton MUI IconButton with Border and Rounded Corners The IconButton has the same styling to get the Add icon right aligned within the IconButton. The div has display: 'flex' and justif圜ontent: 'flex-end' to get the IconButton right aligned within the div.

#Material icon plus code

Take a look at the styling code below to accomplish both forms of right alignment: Both of these alignments can be accomplished using flex. The child Icon can also be aligned inside of the IconButton. The Material-UI IconButton can be aligned left, right, or center inside of a parent container.

#Material icon plus how to

You can also learn how to add hover styling here. There are significant differences in the default styling for MUI Button and MUI IconButton (learn more here). Styling Material-UI IconButtonīelow I will explore several common styling values for the IconButton. I searched the docs and couldn’t find a reference to this class. 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. You can see it in the DOM screenshot below. I also noticed that MUI sets a unique class on icons inside of IconButtons – MuiSvgIcon-fontSizeMedium. I attempted it at the IconButton level and it simply had no effect. Notice that I set the fontSize at the Add icon level. We can pass pixels, rems, and ems, with whatever value we want, so there is quite a bit of flexibility here. Here’s a simplified version of my code for sizing the icon: The styles API or sx prop can be used to pass a specific font size. The nice thing about the prop is it abstracts the styling into easily readable code.

“inherit” – takes the value from its parent element.

#Material icon plus plus

The fontSize prop accepts three string sizing values with corresponding default rem values, plus it accepts “inherit”: These are both options whether the icon is inside a button or independent of a button.

#Material icon plus update

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. This will detect the size the content of the IconButton requires and set the height accordingly. If you have difficulty with getting height correct, try using height: max-content. I have used maxHeight and minHeight far less than maxWidth and minWidth. If your IconButton is less than 50% width but you don’t want other components on the same line, consider this strategy.Īs mentioned above, the size prop won’t accomplish what you want. The div can be 100% width so that no other elements are on the same horizontal line, but the div is invisible. 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.Īnother trick is to wrap the IconButton in a div. Width can be set in a using a variety of CSS values: I will focus on width and height applied with the sx prop below.

By default, the size prop adds the following for IconButtons: It does not directly change the width or height. The size prop only changes the inner padding.

Sizing a ‘regular’ MUI Button is almost the same as an IconButton. It can also be “sized” using the size prop. The MUI IconButton can be sized using the CSS properties size and width within the sx prop. How to Size and Style the Material-UI IconButton Material-UI IconButton Size