How to change icon color on hover?

Question

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>

Answer 1

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',
    },
}))

Answer 2

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>