Add v-icon with label in vuetify autocomplete

Question

I am using v-autocomplete and I am trying to add a v-icon with the label. Is there a way to have a icon with the label. this is how I am trying to implement.

<v-autocomplete
 :items="availabilities"
 @change="selections({availability_id: availability.id})"
 v-model="availability"
 attach
 return-object
 label="Availabilities" + <v-icon color="primary">info</v-icon>
 item-text='name'
>
</v-autocomplete>

But this doesn't work. Please help me achieve this.

Answer 1

Try out to use the label slot like:

<v-autocomplete
 :items="availabilities"
 @change="selections({availability_id: availability.id})"
 v-model="availability"
 attach
 return-object

 item-text='name'
>
  <template #label>
       <span>Availabilities <v-icon color="primary">info</v-icon></span>
  </template>
</v-autocomplete>

Answer 2

I see you want the icon after the label, I'm not sure if you can make it so it works for all browsers, testing the accepted answer seems to work well in Chrome, but in Firefox it shows ellipsis instead of the icon.

When looking at the API for v-autocomplete . I could be wrong, but at least what you can do, is toprepend the icon, set the icon before label, if that is acceptable for you. Seems to be working fine in both Firefox and Chrome (haven't tested other browsers)

<v-autocomplete
  :items="availabilities"
  @change="selections({availability_id: availability.id})"
  v-model="availability"
  attach
  return-object
  label="Availabilities"
  prepend-icon="info" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< HERE
  item-text='name'
>