How to change v-autocomplete defualt icon position?

Question

I am trying to do something with v-autocomplete where the default position for v-autocomplete is on the right side of the field, where I want the field to have icon on the left side before the selected content. I have tried using prepend-icon slot but that isn't working as intended. here is sample code

 <v-autocomplete
          ref="city"
          v-model="city"
          :loading="showCitiesLoading"
          :disabled="showCitiesLoading"
          dense
          outlined
          clearable
          :rules="[requiredRule]"
          color="black"
          item-text="name"
          item-value="name"
          item-color="black"
          :items="citiesList"
          append-icon=""
          @click="isOpen = !isOpen"
        >
          <template #prepend-inner>
            <v-icon @click="isOpen = !isOpen">{{ isOpen ? mdiMenuDown : mdiMenuUp }}</v-icon>
          </template>
        </v-autocomplete>

and also in above section I have made isOpen to false on default inside Data property. Thank You

Answer 1

Try to use the prepend-item slot. And remove your append-icon property too.

 <v-autocomplete
          ref="city"
          v-model="city"
          :loading="showCitiesLoading"
          :disabled="showCitiesLoading"
          dense
          outlined
          clearable
          :rules="[requiredRule]"
          color="black"
          item-text="name"
          item-value="name"
          item-color="black"
          :items="citiesList"
          @click="isOpen = !isOpen"
        >
          <template #prepend-item>
            <v-icon @click="isOpen = !isOpen">{{ isOpen ? mdiMenuDown : mdiMenuUp }}</v-icon>
          </template>
        </v-autocomplete>