How to stop rotation of icons in the v-autocomplete component?

Question

I am trying to use v-autocomplete for a search box. Since its a search box, I am changing the triangle to a search icon using [append-icon="search"]. Now the problem is the search icon rotates 180 and flips upside down. What is the solution to stop that from happening?

<v-autocomplete
   label="Search the collection"
   append-icon="search"
   :items ="components"
/>

Answer 1

Vuetify applies a 180 degree rotation to appended icons of active v-select components

<style>
  .v-select.v-select--is-menu-active .v-input__icon--append .v-icon {
    transform: rotate(180deg);
  }
</style>

I was appending a search icon to my autocomplete component, but it would always turn upside-down when the menu opened. I solved it by simply overriding the above:

<style>
  .v-autocomplete.v-select--is-menu-active .v-input__icon--append .v-icon {
    transform: none;
  }
</style>

Of course, you might not want to override this for all selects. I would recommended you to be as specific as possible when overriding default styles.

Answer 2

Well after some search the only solution i came up with is to remove the css class responsible for the rotation using javascript like this:

var transformClass = document.querySelector(".v-input__icon--append");
transformClass.classList.remove("v-input__icon--append");

here is an example