Search code examples
javascriptcssvue.jsprimevue

How to add icon to autocomplete in PrimeVue

I've run into this issue. There is a feature request for this at the moment. I've provided my workaround in the answer below.

Solution

  • Anyone looking for alternatives can either add a placeholder value to the Autocomplete with emojis as 'icons'

    Option 1

    <AutoComplete
  class="inputSearch"
  id="artist"
  v-model="selectedArtist"
  :suggestions="filteredArtists"
  @complete="searchArtist($event)"
  placeholder="🔍 Search Artist"
>
</AutoComplete>

    Option 2 (better)

    OR use this method where you add icons as a background image and indent the text away from it. You can remove the focus from the example if you want to keep the icon.

    If you have primeicons imported, you can put the path to your desired icon in the url section of background-image. Additionally, you can add

    background-size: 0.8em;
background-position: left;

    under the input in the CSS with your desired values to position and size the icon.

    Final CSS in my case looks like this:

    .inputSearch input {
  background-image: url("../../node_modules/primeicons/raw-svg/search.svg");
  background-size: 0.8em;
  background-position: left;
  background-repeat: no-repeat;
  text-indent: 20px;
}

    If you inspect the Autocomplete in a browser, you'll see an input wrapped in a span. That's why this works. I may copy those icons to my public folder later on. Not ideal, but a workaround for now.