How to remove vuetify autocomplete component default icon

Question

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

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

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:

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

Answer 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