How to apply hover effect on Material Icon?

Question

I am using CSS modules for my project, but Material Icon is not making the changes specified via className prop

import SettingsIcon from "@mui/icons-material/Settings";
import css from "./LandingPage.module.css";

<SettingsIcon className = {css.settingsButton}/>

LandingPage.module.css file

.settingsButton{
    position: absolute;
    right: 20;
    top: 20;
    display: block;
    height: 70px;
    width: 70px;
    transition: transform .7s ease-in-out;
    color: white;
}
.settingsButton:hover{
transform: rotate(360deg);
}

https://stackoverflow.com/questions/50992947/hover-effect-on-iconbutton-in-material-ui — Atif Khan, Oct 15 '22 at 05:06
@AtifKhan it is for Material Icon Button, I want to apply to hover to a Material Icon — Faaf Lo, Oct 15 '22 at 05:16

score 0 · Answer 1 · answered Oct 15 '22 at 09:02

The problem is the default transition property of .MuiSvgIcon-root is more specified than yours.

You need to increase the priority of your css in your module.css file using :global notation like this:

:global(.App) .settingsButton {
  position: absolute;
  right: 20;
  top: 20;
  display: block;
  height: 70px;
  width: 70px;
  transition: transform 0.7s ease-in-out;
  color: white;
}
:global(.App) .settingsButton:hover {
  transform: rotate(360deg);
}

Note that, in this case .App exists my app, if it does not exist in your app, you can wrap your icon with another custom div with a specific className and use it instead of .App.

You can take a look at this sandbox for a live working example of this solution.

How to apply hover effect on Material Icon?

1 Answers1