How to enlarge the SVG icon in material-ui iconButtons? - css

Question

Has anyone build webpages using react.js and the Material UI library? How should I resize the icon size? It is a svg icon.
I just built an "create new" component, which is a piece of material paper with a content add button on the top. Here is the code.
import React from 'react';
import Paper from 'material-ui/lib/paper';
import ContentAdd from 'material-ui/lib/svg-icons/content/add';
import IconButton from 'material-ui/lib/icon-button';
const styleForPaper = {
width: '96vw',
height: '20vh',
margin: 20,
textAlign: 'center',
display: 'inline-block',
};
const styleForButton = {
'marginTop': '7vh',
};
const PaperToAddNewWidgets = () => (
<div>
<Paper style={styleForPaper} zDepth={2}>
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd/>
</IconButton>
</Paper>
</div>
);
export default PaperToAddNewWidgets;
It looks OK (make sure you are viewing it at full size), but the icon is too small. Then I opened the chrome dev tool, and saw the following html code.
<div style="background-color:#ffffff;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;box-sizing:border-box;font-family:Roboto, sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0 3px 10px rgba(0,0,0,0.16),
0 3px 10px rgba(0,0,0,0.23);border-radius:2px;width:96vw;height:20vh;margin:20px;text-align:center;display:inline-block;mui-prepared:;" data-reactid=".0.2.0.1.0"><button style="border:10px;background:none;box-sizing:border-box;display:inline-block;font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);position:relative;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;padding:12px;width:48px;height:48px;font-size:0;margin-top:7vh;mui-prepared:;-webkit-appearance:button;" tabindex="0" type="button" data-reactid=".0.2.0.1.0.0"><div data-reactid=".0.2.0.1.0.0.0"><span style="height:100%;width:100%;position:absolute;top:0;left:0;overflow:hidden;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.0"></span><div style="position: absolute; font-family: Roboto, sans-serif; font-size: 14px; line-height: 32px; padding: 0px 16px; z-index: 3000; color: rgb(255, 255, 255); overflow: hidden; top: -10000px; border-radius: 2px; opacity: 0; left: -44px; transition: top 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; -webkit-user-select: none;" data-reactid=".0.2.0.1.0.0.0.1:0"><div style="position: absolute; left: 50%; top: 0px; transform: translate(-50%, -50%); border-radius: 50%; transition: width 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, height 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms, backgroundColor 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 0px; height: 0px; background-color: transparent;" data-reactid=".0.2.0.1.0.0.0.1:0.0"></div><span style="position:relative;white-space:nowrap;mui-prepared:;" data-reactid=".0.2.0.1.0.0.0.1:0.1">Add New Widget</span></div><svg style="display:inline-block;height:24px;width:24px;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;fill:rgba(0, 0, 0, 0.87);mui-prepared:;-webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.2.0.1.0.0.0.1:2:$/=10.0"></path></svg></div></button></div>
Using chrome dev tool, I revised the svg icon size and the viewbox property of svg and made the icon larger in browser. But I am not sure how I can resize the icon size in my code. If I write a CSS file to revise the svg it will be problematic if there are more than one svg elements.

Answer 1

do this
<SomeIcon className="svg_icons"/>
.svg_icons {
transform: scale(1.8);
}
just use scale :D it works

Answer 2

Note: iconStyle prop is no longer supported on IconButton Material UI making this answer obsolete
You have to set the size of the icon in the iconStyle prop in <IconButton>. Example below from the material-ui docs.
From my experience, if you set just the height or the width, nothing happens--only seems to work when you set height & width to the same value.
import React from 'react';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';
const styles = {
largeIcon: {
width: 60,
height: 60,
},
};
const IconButtonExampleSize = () => (
<div>
<IconButton
iconStyle={styles.largeIcon}
>
<ActionHome />
</IconButton>
</div>
);

Answer 3

No. Most of the other answers are unsatisfactory and are poor practice, at least in 2021. This answer is literally answered in the documentation here and doesn't require any CSS hacks to get working.
In MUI, the Button and IconButton components are just essentially wrappers that nest the child Icon element in an <a> or <Link> (react-router) element. They don't have any intrinsic control over the size. Thus, to increase the button size, just increase the size of the Icon child of IconButton using the fontSize property. This will automatically make the button larger.
For instance, to make the IconButton below larger:
<IconButton>
<Icon />
</IconButton>
We just increase the size of the Icon child directly.
<IconButton>
<Icon fontSize="large" />
</IconButton>
However, this is largest size you can specify with the fontSize property. To go even larger, we must configure the CSS font-size property manually.
<IconButton>
<Icon style={{ fontSize: 60 }} />
</IconButton>
Simple as.
EDIT: Apparently, for whatever reason, Button components have a size property that allows their size to be controlled, but IconButton components don't. I'm not sure why MUI is so inconsistent...

Answer 4

I faced the same issue while using the last React version (which is today v16.13.1) and Material-ui (which is today v4.9.14).
How I solved it?
By simply adding this style to the icon button
MyIconButton: {
'& svg': {
fontSize: theSizeIWant
}
}
Complete example
import React from "react";
import { makeStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
import DeleteIcon from '#material-ui/icons/Delete';
const useStyles = makeStyles((theme) => ({
deleteIcon1: {
'& svg': {
fontSize: 25
}
},
deleteIcon2: {
'& svg': {
fontSize: 50
}
},
deleteIcon3: {
'& svg': {
fontSize: 75
}
},
deleteIcon4: {
'& svg': {
fontSize: 100
}
}
}));
export default function App() {
const classes = useStyles();
return (
<div className="App">
<h1>fontSize: 25</h1>
<IconButton className={classes.deleteIcon1}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 50</h1>
<IconButton className={classes.deleteIcon2}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 75</h1>
<IconButton className={classes.deleteIcon3}>
<DeleteIcon />
</IconButton>
<h1>fontSize: 100</h1>
<IconButton className={classes.deleteIcon4}>
<DeleteIcon />
</IconButton>
</div>
);
}
and the result will be:
Live running code
I created this codesandbox.
Hope this helps!

Answer 5

With the latest version of material-ui (3.1.0), you can change padding of IconButton and fontSize of SvgIcon to update the looks.
const styles = theme => ({
smallButton: {
padding: 6
},
largeButton: {
padding: 24
},
largeIcon: {
fontSize: "3em"
},
input: {
display: "none"
}
});
function IconButtons(props) {
const { classes } = props;
return (
<div>
<IconButton className={classes.smallButton} aria-label="Delete">
<DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="Delete">
<DeleteIcon fontSize="large" />
</IconButton>
<IconButton className={classes.largeButton} aria-label="Delete">
<DeleteIcon className={classes.largeIcon} />
</IconButton>
</div>
);
}
Live demo

Answer 6

You could just use the fontSize attribute on the child node of IconButton element, that is, in your case - ContentAdd node.
<IconButton
style={styleForButton}
touch={true}
tooltip="Add New Widget">
<ContentAdd fontSize="large" />
</IconButton>
There are 4 options available - inherit, default, small and large.
Source - https://material-ui.com/api/icon/#props

Answer 7

When you need that for your global project you might add a new variant to your MUI theme.
components: {
MuiSvgIcon: {
variants: [
{
props: { fontSize: 'huge' },
style: {
fontSize: '5rem',
},
},
],
},
}
In order to get it worked for TS, you might need to extend the module declarations:
declare module '#mui/material/SvgIcon' {
interface SvgIconPropsSizeOverrides {
huge: true;
}
}
usage:
<HomeIcon fontSize="huge" />
I also wrote a little post on dev.to

Answer 8

this worked for me
fontSize="large"
<Badge badgeContent={4} color="primary" >
<CameraAltIcon fontSize="large" />
</Badge>
look Props --> fontSize
https://material-ui.com/api/icon/

Answer 9

For the current version of MUI (v5.8.5) there is a fontSize prop on the icons with different set sizes of 'small', 'medium', 'large' so you could do something like:
<HomeIcon fontSize="small" />
If one of those set sizes doesn't fit your needs there is also the option to use 'inherit' if you'd like it to match the font size of the container it is in and not have its own separate size.
Lastly, you could use the sx property which MUI places on all its components and in there it will accept the fontSize property which allows you to set the size directly to the icon. For instance:
<WhatshotIcon sx={{ fontSize: 140 }} />
https://mui.com/material-ui/icons/#size

Answer 10

There are two ways of enlarging the svg, one is to override the style with iconStyle, the other is to edit the code found in https://github.com/callemall/material-ui/blob/master/src/SvgIcon/SvgIcon.js
Note: ContentAdd imports from SvgIcon
const mergedStyles = Object.assign({
..
height: 24, // <-- change default height
width: 24, // <-- change default width
..
}, style);
return (
<svg
{...other}
..
style={prepareStyles(mergedStyles)}
..
>

Answer 11

I am using IconStyle prop to change the size of svg icon.
<IconButton
tooltip="Add New Group"
tooltipPosition="top-center"
style={{padding: 0, height: 0}}
iconStyle={{height: 31, width: 48}}
onClick={e => this.openNewList()}
disabled={!this.state.newAvailable}>
<ActionHome />
</IconButton>

Answer 12

There is always simple things to do
give an classname to your material ui icon
And go to your css file and give
height:40px !important and width 40px !impoetant

Answer 13

If className={ classes.classname } , fontSize : '40px' , size= 'large' etc not working then try it inline styling, you can give your height and width size as per required
<OpenInNewIcon style={{ height: '18px', width: '18px' }} />
I hope it will work,

Answer 14

Resize using
fontSize
<Box sx={{ fontSize: '2rem' }}>
<CloseIcon sx={{ fill: 'white', fontSize: 'inherit', mt: 0.375 }} />
</Box>
width orheight
<Box sx={{ width: '15vw' }}>
<CloseIcon sx={{ fill: 'white', width: '100%', height: '100%', mt: 0.375 }} />
</Box>

Answer 15

assuming you using Sass:
.divWithTargetSVG {
.MuiSvgIcon-root {
font-size: Xrem/px;
}
}

Answer 16

This is how I solved my problem with the SVG icon size. I also needed to be smaller when I hit the 768 media query break point.
import { withStyles } from '#material-ui/core/styles';
import { TextField, IconButton } from '#material-ui/core';
import CloseIcon from '#material-ui/icons/Close';
const StyledCloseIcon = withStyles(theme => ({
root: {
fontSize: 35,
[theme.breakpoints.down('768')]: {
fontSize: 19,
}
},
}))(CloseIcon);
use it here like this:
<StyledTextField
size='small'
fullWidth
id="standard-bare"
variant="outlined"
InputProps={{ endAdornment: (<IconButton size='small'><StyledCloseIcon /></IconButton>), }} />
Hope it helps someone. Cheers!