如何删除vuetify自动完成组件默认图标

Question

Vuetify 自动完成默认情况下有自定义的“向上”和“向下”箭头图标：

如何更改此图标以搜索其他事件（活动或非活动）中的图标并获取此视图：

此示例使用

v-text-field

创建：

代码：

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

我厌倦了将图标附加到 vuetify 自动完成组件，但无法删除默认的上下行。

代码：

<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>

结果：

一般如何将箭头图标更改为搜索图标并将其设置为可单击搜索？

Answer 1

使用

append-icon=""

并将其设置为空白

这是例子。

如果您想附加具有回调函数的图标，请使用

append-icon-cb="()"

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

Answer 2

试试这个

append-icon="mdi-magnify"

Answer 3

您可以使用

menu-icon=""

属性并留空或设置任何您想要更改旋转图标的图标，如您在官方 vuetify 文档中看到的那样

https://vuetifyjs.com/en/api/v-autocomplete/#props-menu-icon