[IconButton] : iconHoverColor

Problem Description

I am using IconButton with a nested SVG Icon, Settings. When I set hoverColor on the SVG icon itself, the effect I desired (a highlighted-on-hover cog) works up until being clicked.

I am trying to use iconStyles on the IconButton and change iconHoverColor but cannot seem to emulate this effect. Any feedback is appreciated. Ideally, I want to do something like this so that the SVG icon will keep the color when being highlighted:

<IconButton tooltip="Font Icon" iconStyle={{iconHoverColor: '#55ff55'}} style={styles.icon}>
   <Settings style={styles.settings} color={'white'} />
</IconButton>

Versions

• Material-UI: 0.15.0-alpha.2
• React: 15.0.1
• Browser: Chrome 49.0.2623.110

[catphat]

I recently ran into this issue and solved it with the following implementation.

.parent-span svg {
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.parent-span:hover svg {
  fill: #0097a7 !important;
}

import IconButton from 'material-ui/IconButton'
import ChevronLeftIcon from 'material-ui/svg-icons/navigation/chevron-left'

...

<span className="parent-span">
  <IconButton>
    <ChevronLeftIcon />
  </IconButton>
</span>

[tintin1343]

@kingscott : There is not property called iconHoverColor in css. And i don’t think you can specify :hover property like in css. However what you can do here is use the onMouseEnter and onMouseLeave props of iconButton and try and achieve what you want to.

Check this out:

import React from 'react';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

const iconStyles = {
  marginRight: 24,
};

const styles = {
  icon: {
    margin: 0,
  },
};

function addColor() {
  this.style.backgroundColor = 'magenta';
}

function removeColor() {
  this.style.backgroundColor = 'white';
}

const IconButtonExampleSimple = () => (
  <IconButton tooltip="Font Icon" onMouseEnter={addColor}
    onMouseLeave={removeColor} style={styles.icon}
  >
    <ActionHome style={iconStyles} color={'black'} />
  </IconButton>
);

export default IconButtonExampleSimple;

This certainly works for me.

hope this helps!