title: How to remove vuetify autocomplete component default icon
body: <p>Vuetify autocomplete by default have custom "up" and "down" arrow icons:</p>
  
  <p><a href="https://i.stack.imgur.com/xhW2x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xhW2x.png" alt="Down arrow by default"></a>
  <a href="https://i.stack.imgur.com/9F8i3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9F8i3.png" alt="Up arrow when input active"></a></p>
  
  <p>How can be changed this icon to search icon in other events (active or inactive) and get this view:</p>
  
  <p><a href="https://i.stack.imgur.com/jI3CM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jI3CM.png" alt="Text field example search bar"></a></p>
  
  <p>This example created using <code>v-text-field</code>:</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;v-text-field
    flat
    solo
    hide-details
    append-icon="search"
    label="Search..."
    color="#000000"
  &gt;&lt;/v-text-field&gt;
  </code></pre>
  
  <p>I tired append icon to vuetify autocomplete component but can't remove default up and down rows.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;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"
  &gt;&lt;/v-autocomplete&gt;
  </code></pre>
  
  <p><strong>Result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jft2i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jft2i.png" alt="enter image description here"></a></p>
  
  <p>Generaly how I can change arrow icons to search icon and do it as clickable for search?</p>