How to override v-select input icon-CodePudding

Home > front end > How to override v-select input icon

How to override v-select input icon

Time：07-23

I want to change the default material design icon in v-select from mdi-menu-down to mdi-chevron-down. How do I do that?

I managed to hide the default icon by using ::v-deep like this

::v-deep .custom-input-append .v-input__append-inner{
display: none;
}

Please take a look at the image below

CodePudding user response：

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>