Styling an icon defined with prepend-icon in Vuetify
Target it properly and apply style.
For example in v-list-group
:
.v-list__group__header__prepend-icon .v-icon {
color: red;
}
But note for example v-text-field
append icon
.v-input__icon--append .v-icon {
color: purple;
}
NOTE: If it's not working, and you are using scoped styles, see how to resolve it.
Care not to use only .v-icon
because for example you might override append icon as well, which might not be what you want.
Also, !important
is not a good practice and we don't need to use it here.
So just rotate .v-list__group__header__prepend-icon
class depending on component or even add your own class. Inspect element and see what the class is for prepend/append icon because it's not always same.
(if you are using scoped styles then perhaps there is no need for adding your own additional selectors for targeting the specific icons).
Example codepen
Note: I'm not aware of any vuetify's own classes or props for styling prepend/append icons. So if these exist or get implemented in the future, use them.
Using a v-icon
inside the prependIcon
slot of the v-list-group
template (instead of the prepend-icon
prop) will give you all the flexibility you need:
<v-list-group>
<v-icon slot="prependIcon" large color="primary">comment</v-icon>
</v-list-group>
There's also an appendIcon
slot available, btw. The official Vuetify documentation mentions the available slots, but is rather silent about any details.