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-icon
included, that’s why you should add!important
to override the default styles set by Vuetify.However, you can customize the Vuetify colors creating an external
.js
file.I recommend reading the theme configuration documentation provided by Vuetify:
https://vuetifyjs.com/en/features/theme/#customizing