Can someone guide me on the proper utilization of Vuetify components that utilize icons with @mdi/js?
Here is my Vuetify configuration:
vuetify: {
iconfont: 'mdiSvg',
defaultAssets: false,
...
}
Although I can import the icons and customize them in the v-checkbox, I do not want to repeat this process for every v-checkbox used:
<template>
<v-checkbox
v-model="checkboxModel"
:indeterminate-icon="mdiCheckboxMarkedOutline"
:on-icon="mdiCheckboxMarked"
:off-icon="mdiCheckboxBlankOutline"
:label="Checkbox"
></v-checkbox>
</template>
<script>
import {
mdiCheckboxBlankOutline,
mdiCheckboxMarked,
mdiCheckboxMarkedOutline,
} from '@mdi/js'
export default {
data() {
return {
checkboxModel: false,
mdiCheckboxBlankOutline,
mdiCheckboxMarked,
mdiCheckboxMarkedOutline,
}
},
}
</script>
Another approach would be to override the $checkboxOff SASS variable.
I located the declaration of the variable in
node_modules/vuetify/dist/vuetify.js checkboxOff: 'M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z',
This is the actual svg path of the icon (you can view it by pasting it into ). Despite attempting to override it in 'variable.scss', I have not achieved success.
What could be missing in my implementation?