'How to remove vuetify autocomplete component default icon

Vuetify autocomplete by default have custom "up" and "down" arrow icons:

Down arrow by default Up arrow when input active

How can be changed this icon to search icon in other events (active or inactive) and get this view:

Text field example search bar

This example created using v-text-field:

Code:

<v-text-field
  flat
  solo
  hide-details
  append-icon="search"
  label="Search..."
  color="#000000"
></v-text-field>

I tired append icon to vuetify autocomplete component but can't remove default up and down rows.

Code:

<v-autocomplete
  v-model="select"
  :append-outer-icon="search ? 'search' : 'search'"
  label="Search..."
  type="text"
  :loading="loading"
  :items="items"
  :search-input.sync="search"
  cache-items
  class=""
  flat
  hide-no-data
  hide-details
  @click:append-outer="startSearch"
></v-autocomplete>

Result:

enter image description here

Generaly how I can change arrow icons to search icon and do it as clickable for search?

vue.jsvuejs2frontendvue-componentvuetify.js


Solution 1:[1]

Use append-icon="" and set it to blank

Here's the example.

If you want to append icon with callback function use append-icon-cb="()"

https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101

Solution 2:[2]

Try this append-icon="mdi-magnify"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jesús Morán

Related Questions