Material-ui: Style prop not passed through for SvgIcons inside of IconButtons

[echenley]

import IconButton from 'material-ui/lib/icon-button';
import { ActionDelete as DeleteIcon } from 'material-ui/lib/svg-icons/';

<IconButton>
    <DeleteIcon
        style={ { margin: '12px' } }
        color="#f00"
        hoverColor="#000"
    />
</IconButton>

color and hoverColor work as expected. Everything works without <IconButton>.

[echenley]

It does work when modified to use IconButton's iconStyles prop:

import IconButton from 'material-ui/lib/icon-button';
import { ActionDelete as DeleteIcon } from 'material-ui/lib/svg-icons/';

<IconButton iconStyles={ { margin: '12px' } }>
    <DeleteIcon
        color="#f00"
        hoverColor="#000"
    />
</IconButton>

However, since putting the style prop on the icon itself is more intuitive, I think it is worth supporting both methods.

[alitaheri]

Yeah... i had the same issue many many times! @oliviertassinari Should we make this happen?

[oliviertassinari]

It does work when modified to use IconButton's iconStyles prop:

Yes, I think that we should fix this :open_mouth:.

[alitaheri]

On it

[wasd171]

Also, looks like styles in iconStyles do not overwrite existing styles of SvgIcon, for instance it's impossible to change the width or height - they have constant values of 24

[yoadsn]

Sorry to see this was postponed.
To anyone who stumbles upon this. using v0.14.4 - You will not be able to control the width/height of the SvgIcon within the a FloatingActionButton (and maybe other MUI parent components).

My work around, is to wrap the icon with a dummy div that would take on itself the forced styles so you can override the svg icon styles.

<div><ImageStyle color='black' style={{ width: 32, height: 32}}/></div>

[tintin1343]

@wasd171 : you can override it using iconStyles. I just did.

 <IconButton iconStyle={{backgroundColor: 'magenta', height: 30, width: 30}}>
      <ActionDelete
        color="cyan"
        hoverColor="#000"
      />
 </IconButton>

[m2mathew]

Like @tintin1343 said above, it looks like passing in a height and width to the iconStyle prop does change the

Do we need anything else from this issue, @oliviertassinari @alitaheri?

[oliviertassinari]

Do we need anything else from this issue

The issue description looks pretty good. We have a reproduction test case. I have added a good first issue tag for anyone how want to submit a PR.

[m2mathew]

I think I misunderstand the issue, then. When adding styles to the iconStyles prop, it does transfer to the SVG.

For instance, when I add these styles

iconButton: {
  color: lightBlack,
  height: 42,
  width: 42,
}

to this component

<IconButton
  iconStyle={styles.iconButton}
  onClick={this.props.onClickAddRecipient}
  tooltip="Add Recipient"
  tooltipPosition="bottom-center"
>
  <PersonAddIcon />
</IconButton>

...I can see in the Chrome inspector that the SVG element itself has the iconStyles applied to it.

[mbrookes]

Closing as resolved per @m2mathew. Please feel free to reopen if not.