CODEWITHSUNDEEP
cssmaterial-design
Sergino
Sergino

Reputation: 10818

Change material icon color on hover

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?

Upvotes: 3

Views: 16025

Answers (4)

ob1
ob1

Reputation: 1434

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;
}

Upvotes: 0

wrahim
wrahim

Reputation: 1168

The mdl-color-text--blue-grey-400 class on the i tag will require you to use !important when changing it's color.

Upvotes: 0

Mr. Smee
Mr. Smee

Reputation: 960

Here is the correct code: 

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

First you need to set the :hover on the link class not the icon class. Second you must use !important because there is a different class (.mdl-color-text--blue-grey-400) that is using !important that you must override.

Upvotes: 1

gabesoft
gabesoft

Reputation: 1228

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

Upvotes: 1

Related Questions