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?

Answer 1

You would have to add !important on the color because the icon has a class (mdl-color-text--blue-grey-400) that adds the grey color with important also