20

Normally to style an icon in Vuetify we'll do something like

<v-icon large color="primary">comment</v-icon>

How do we get the same effect while using the prepend-icon prop like here 

<v-list-group prepend-icon="comment">

The documentation says prepend-icon uses same syntax as v-icon but no concrete example is provided for my use case

Hippolyte Fayol
  • 526
  • 1
  • 5
  • 14
  • Afaik styling them can't be done by using properties, so you must use css for styling prepend/append icons. – Traxo May 12 '18 at 09:42

6 Answers6

27

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.

Stefan Haberl
  • 9,812
  • 7
  • 72
  • 81
18

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.

Traxo
  • 18,464
  • 4
  • 75
  • 87
14

Many of the Veutify items provide slots for appending and prepending icons. And via this icons can be colored/sized as like a normal v-icon components.

<v-text-field>
  <template v-slot:append>        
    <v-icon color="green"> mdi-arrow-up-bold </v-icon> 
  </template>
</v-text-field>

Side note: And, as it is a slot, it's not just icons that you can append. But you can append anything for eg: A tooltip!!

Documentation: https://vuetifyjs.com/en/components/text-fields/#icon-slots

Anees Hameed
  • 5,916
  • 1
  • 39
  • 43
Bharath Ranganathan
  • 141
  • 1
  • 2
0

This will work (taken from official documentation):

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.

<v-list-group>
<template v-slot:prepend>
    <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-icon v-on="on" color="yellow">place</v-icon>
        </template>
        tooltip text
      </v-tooltip>
    </template>
</v-list-group>

In case of a tex field component for example, it can be useful to leave the tooltip text empty as it can clear the icon when you type in (I experienced this)

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
0

I cannot comment on Annes' answer, but I guess its important to add that in Vue 3 you can do this to create an inner append / prepend:

<v-text-field> 
    <template v-icon:appendInner>
        <font-awesome-icon icon='eye'>
    </template>
</v-text-field>
Nats
  • 31
  • 5
0

While working on vuetify 3, I had the same issue, to solve it I added a class to my element then I used :deep.

For example :

<style scoped>
.item-icon :deep(.v-icon) {
    margin-right: 10px;
  } 
</style>
Lynexor
  • 41
  • 6