I use Vuetify but disabled the import of all icons since treeshaking wasn't working properly in Nuxt, instead I followed the advice and import them manually as stated in this thread: vuetifyjs: Adding only used icons to build
However, this means that a lot of components that require icons, e.g v-checkbox, v-select or v-combobox (which uses v-checkbox in their dropdown menus) need their icons added manually. Just using v-checkbox allows for :on-icon & :off-icon props to be used but I can't figure out how I'd reach them when the checkboxes are used by other components.I've been attempting to change the behaviour in both v-select and v-combobox.
This is as far as I got but clearly this doesn't add the checked icon, just the blank one.
<v-combobox outlined multiple chips v-model="select" :items="items"><template v-slot:item="{ item }"><v-icon>{{mdiCheckboxBlankOutline}}</v-icon>{{ item }} /template></v-combobox>import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";Data(){select: ["Stockholm"], items: ["Stockholm","London", ],}
My question is therefore, how can replicate the default checkbox behaviour for the combobox menu using imported icons?This thread seems to talk about it but never ends up showing a code example:https://github.com/vuetifyjs/vuetify/issues/10904(Meaning it should look like this)