[Vuejs]-How to override v-select input icon

3👍

It is not necessary to change CSS directly. Just use append-icon prop:

<v-select
  :items="items"
  label="Standard"
  append-icon="mdi-chevron-down"
></v-select>

0👍

To globally override for all v-selects using mdi fonts as an example (vuetify 2):

new Vuetify({
    icons: {
        iconfont: 'mdi',
        values: {
            dropdown: 'mdi-chevron-down'
        }
    }
})

because the doc states that:
enter image description here

The default icon is: $dropdown so we can override this icon the above mentioned way. (and many others the same way)

Also find available presets here (in mdi file in our case):
https://github.com/vuetifyjs/vuetify/tree/v2-stable/packages/vuetify/src/services/icons/presets

Leave a comment