Icon over the button of v-switch vuetify

Question

I am using vuetify and I just wanna add an icon over the button of v-switch, I searched in slots and found nothing

<v-switch label="Dark mode" flat inset></v-switch>

I wanna do like this picture

Answer 1

You can use v-checkbox, with off-icon and on-icon. As example:

<v-checkbox class="pt-3"
    v-model="$vuetify.theme.dark"
    color="purple"
    off-icon="mdi-theme-light-dark"
    on-icon="mdi-theme-light-dark"
  ></v-checkbox>

Reference at https://vuetifyjs.com/en/api/v-checkbox/#props

Answer 2

far you can do is append-icon and/or prepend-icon props

you can check the detail at https://vuetifyjs.com/en/api/v-switch/#props