Material-ui: Can't make custom size for IconButton

[ffxsam]

What is the proper way to make an IconButton a custom width and height? No matter what I try, it doesn't seem to work. The closest I've gotten is this:

      <IconButton style={styles.big} iconStyle={styles.big}>
        <Play color={rcTheme.palette.primary1Color} />
      </IconButton>

But the button becomes off-center, and the ripples are also not centered properly. What am I missing?

[ffxsam]

It turns out it was a padding issue. I fixed it like so:

<IconButton style={styles.button} iconStyle={styles.icon}>
  <Play
    color={rcTheme.palette.primary1Color}
    hoverColor={ColorManipulator.lighten(rcTheme.palette.primary1Color, 0, 0.7)}
  />
</IconButton>

Styles:

const styles = {
  button: {
    width: 64, height: 64,
    padding: 0,
  },
  icon: {
    width: 64, height: 64,
  },
};

Though a strange side-effects now are that the SVGIcon hoverColor only works until I click on the button, and the ripple effect size does not change with the new IconButton size.

[RahavLussato]

+1 happen to me too,
i changed the size with iconStyle={{fontSize:40}} but its ripple effect size does not change,
and the tooltip loose center

[RahavLussato]

i success to do that with

style={styles.button} iconStyle={styles.icon} tooltipStyles={styles.tooltip}

const styles = {
    button: {
        width: 64, height: 64,
        padding: 0
    },
    icon: {
        fontSize:40,
        color:'#fffff'
    },
    tooltip: {
        marginLeft:7
    }
};

[ffxsam]

Wow, that seems like an awful lot just to make the desired style change.

[LimmaPaulus]

My approach which modifies only svg-size:

import IconButton from '@material-ui/core/IconButton';
import React from 'react';
import {withStyles} from '@material-ui/core/styles';

const ResizableIconButton = ({classes, size, ...props}) =>
    <IconButton className={classes[size]}
                {...props}/>;

const styles = {
    small: {
        '& svg': {
            fontSize: 18
        }
    },
    medium: {
        '& svg': {
            fontSize: 24
        }
    },
    large: {
        '& svg': {
            fontSize: 32
        }
    }
};

export default withStyles(styles)(ResizableIconButton);

Then it can be used like this:

<ResizableIconButton size='large'
                     onClick={onClick}>
    <RefreshIcon/>
</ResizableIconButton>;

It seems to work pretty well.