IconButton Hovering Effect on Material UI

Question

below i have different icons from material UI , which currently displays a grey circle whenever i hover on any of them , i want to remove this grey circle and i want each icon to change to a specific color whenever i hover over it i looked at the documentation in material ui but couldn't find anything that explains it , appreciate your feedback.

<Box className={classes.socialmedia}>
            <IconButton aria-label="twitter">
              <TwitterIcon />
            </IconButton>
            <IconButton aria-label="facebook">
              <FacebookIcon />
            </IconButton>
            <IconButton aria-label="instagram">
              <InstagramIcon />
            </IconButton>
            <IconButton aria-label="Youtube">
              <YouTubeIcon />
            </IconButton>
            <IconButton aria-label="Apple">
              <AppleIcon />
            </IconButton>
          </Box>

Answer 1

In order to remove the grey circle displaying in background on hover then you can use disableFocusRipple & disableRipple property in IconButton component and set style={{ backgroundColor: 'transparent' }}. Ex:

<IconButton
    disableFocusRipple
    disableRipple
    style={{ backgroundColor: "transparent" }}
    aria-label="twitter"
  >
    <TwitterIcon className={classes.twitter} />
  </IconButton>

To change the color of icon on hover then use hover selector. Ex:

    const useStyles = makeStyles({
  twitter: {
    "&:hover": {
      color: "#00acee"
    }
  }
});

I've created a quick example to illustrate the solution in codesandbox:

https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961