I'm trying to change the color of a material icon inside IconButton material component (an action that should trigger color change - hover over IconButton).

How this could be done? Adding class to the icon directly works only if hover over icon itself and not over IconButton.

My code:

<IconButton className="add-icon-btn" onClick={toggleNominationForm}>
  {!showForm ? <AddBoxIcon /> : <IndeterminateCheckBoxIcon /> }
</IconButton>

I'm trying to change the color of a material icon inside IconButton material component (an action that should trigger color change - hover over IconButton).

How this could be done? Adding class to the icon directly works only if hover over icon itself and not over IconButton.

My code:

<IconButton className="add-icon-btn" onClick={toggleNominationForm}>
  {!showForm ? <AddBoxIcon /> : <IndeterminateCheckBoxIcon /> }
</IconButton>

• javascript
• html
• css
• reactjs
• material-ui

• A working stackblitz demo would really help in understanding your query. – Vibhor Dube Commented Jun 16, 2020 at 15:53
• I don't know why, but I can't create a workable app there - stackblitz.com/edit/react-gwnrwh – Karen Commented Jun 16, 2020 at 15:59
• Just check this answer You don't need to use the spread part if you don't want to and use it simply like <AddBoxIcon style={{backgroundColor: hover ? "blue" : "yellow"}} /> – devserkan Commented Jun 16, 2020 at 16:06

4 Answers 4

Here you have a full example, I hope this solves your problem:

import React from 'react'
import { makeStyles } from '@material-ui/styles'
import IconButton from '@material-ui/core/IconButton'
import AddBoxIcon from '@material-ui/icons/AddBox'
import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox'

export default () => {

    const [showForm, setShowForm] = React.useState(false)
    const classes = useClasses()

    return (
        <IconButton
            classes={{
                root: classes.iconContainer
            }}
        >
            {!showForm
                ? <AddBoxIcon className={classes.icon}/>
                : <IndeterminateCheckBoxIcon className={classes.icon}/>
            }
        </IconButton>
    )
}

const useClasses = makeStyles(theme => ({
    iconContainer: {
        "&:hover $icon": {
            color: 'red',
        }
    },
    icon: {
        color: 'blue',
    },
}))

You can use following property

sx={{ "&:hover": { color: "blue" } }}

<IconButton
              size="large"
              aria-label="show 17 new notifications"
              color="inherit"
              sx={{ "&:hover": { color: "blue" } }}
            >
              <Badge badgeContent={17} color="primary">
                <LayersIcon />
              </Badge>
            </IconButton>

You need a hover state probably. So, you can use onMouseEnter and onMouseLeave for the outer icon and then set the style by using this condition for the inner icon. This logic is borrowed from this answer. So, I'm setting my answer as CW.

<IconButton
  onMouseEnter={() => {
    setHover(true);
  }}
  onMouseLeave={() => {
    setHover(false);
  }}
  className="add-icon-btn"
  onClick={toggleNominationForm}
>
  {!showForm ? (
    <AddBoxIcon style={{ backgroundColor: hover ? "blue" : "yellow" }} />
  ) : (
    <IndeterminateCheckBoxIcon />
  )}
</IconButton>

Try adding the following CSS -

.IconButton:hover .Iconclass {
  background-color: /*desired color*/;
}