Material-ui: [IconButton] : iconHoverColor

[kingscott]

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

[tintin1343]

@kingscott : So you just want to change the on hover color for the iconButton but keep the color of the Settings SVG icon?

[kingscott]

@tintin1343 Thanks for the response. Correct. So what happens now is when the page loads, and I hover over the IconButton (with the nested Settings SVG) it works, the colour changes. But as soon as I click on the IconButton the functionality is lost and is just gives the shadow when I hover and the icon stays white.

[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!

[tintin1343]

Closing this issue for now . if the above solution doesnot help feel free to use the gitter channel of material-ui for getting your query addressed or posting the question on stackoverflow with the material-ui tag.

[kingscott]

Sorry, maybe I wasn't clear before. In your GIF, I'm wanting the actual colour of the house icon to change. Not the background.

[tintin1343]

Alright, so here it goes:

The Initial code will remain the same with some minor changes:

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

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

const changeColor = 'magenta';
const hoverColor = 'green';

const IconButtonExampleSimple = () => (
  <IconButton tooltip="Font Icon"
    style={styles.icon}
  >
    <ActionHome color={changeColor} hoverColor={hoverColor} />
  </IconButton>
);

export default IconButtonExampleSimple;

You will need to make some changes in your Settings components, as follows:

import React from 'react';
import pure from 'recompose/pure';
import SvgIcon from '../../SvgIcon';

let ActionHome = (props) => (
 ` <SvgIcon {...props} color={props.color} hoverColor={props.hoverColor} >
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </SvgIcon>`
);
ActionHome = pure(ActionHome);
ActionHome.displayName = 'ActionHome';

export default ActionHome;

What I have done is , I am just setting the hovercolor and default color of the svg icon. The Settings icon which is essentially an svgicon has props called color and hovercolor. You just have to pass those props to the Settings component.

[kingscott]

Very interesting, thanks for your time. I'll let you know what happens!

[killroy42]

The problem I see with this is that the button has significant padding. So one needs to modify styles further to transfer the padding to the icon, so the hover activates at the right time. It would be much better if the icon color could be controlled as part of the iconStyles on the button itself.

[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>