Vuetifyのv-selectのドロップダウンアイコンを変更する方法

Vuetifyのv-selectコンポーネントを利用する際に、デフォルトだと以下のようなアイコンです。

このアイコンを別のアイコンに変更する方法を２パターン試してみました。

対象のコンポーネントのみ変更する

v-selectコンポーネントのappend-iconプロパティに変更したいアイコンを指定します。 ちなみにデフォルトはmdi-menu-downというアイコンが設定されています。 以下の通り実装することで、対象のコンポーネントのアイコンのみ指定されたアイコンに変更されます。

<v-select append-icon="mdi-chevron-down">

v-selectすべてを変更する

一部のコンポーネントのみ変更するよりも、サイト全体として変更することのほうが多いのかもしれません。 そんな時は、v-selectが利用しているのデフォルトのアイコン設定を変更します。 iconsのvaluesに変更したいアイコンを指定することで変更することができます。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
    values: {
      dropdown: 'mdi-chevron-down'
    },
  },
})

nuxt.jsのbuildModulesを使って指定する場合は、以下のように指定することができます。

// nuxt.config.js

[
  "@nuxtjs/vuetify",
    icons: {
      iconfont: "mdi", // default
      values: {
        dropdown: "mdi-chevron-down"
      }
    }
  }
]

変更後

以下のようにドロップダウンのアイコンが変更されます。