Change material icon color on hover

Question

I am using this demo and want to change icons color on hover

.demo-navigation .mdl-navigation__link .material-icons:hover {
  background-color: #00BCD4;
  color: #FFF;
}

But didn't work. Is there any way to achieve that?

user_8168719 · Answer

in your css :hover rule add the !important keyword.

.your-icon-class {
  transition: all 300ms; // if you want the color to gradually change
}

.your-icon-class:hover {
  color: #FFF !important;
}