How to set the color of a v-icon which is disabled without a gnarly css selector and !important?

It is easy to set the color of a v-icon simply by setting the color prop:

<v-icon color="red">home</v-icon>

However I’m having problems formatting disabled icons. There are no properties of v-icons specific to disabled states, so it seems we must resort to css selectors. For example, in order to set the opacity it is possible to use a css selector:

:disabled { opacity: 40%; }

However, to override the color of an icon it seems I have to resort to something extremely specific like and use !important

.application--light .icon.icon--disabled { color: blue!important; }

Take a look at an example. Is there some way to set the color of a disabled v-icon with a property of the v-icon, or with a simpler selector and without using !important?

1 thought on “How to set the color of a v-icon which is disabled without a gnarly css selector and !important?”

Leave a Comment