How can I make my Material Icons change color when I hover over them?-CodePudding

I'm using mui icons 5.2.0 in my React page.

The icon is showing up, but it does not change color when I hover over it.

Here is my code:

import EditIcon from '@mui/icons-material/Edit';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    customHoverFocus: {
        "&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
    }
}));

<EditIcon className={useStyles.customHoverFocus} />

Is there anything I am missing?

CodePudding user response：

You can do it like this

 <EditIcon sx={{ "& :hover": { color: "yellow" } }} />

Here is an axample here https://codesandbox.io/s/material-ui-icon-color-bfb8d?file=/demo.js:1047-1099