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?
By default, Vuetify does not allow CSS styles for most of its components,
v-iconincluded, that’s why you should add!importantto override the default styles set by Vuetify.However, you can customize the Vuetify colors creating an external
.jsfile.I recommend reading the theme configuration documentation provided by Vuetify:
https://vuetifyjs.com/en/features/theme/#customizing