Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to override v-select input icon

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading