UPDATE
Here's the solution I discovered:
<v-icon>
{{ mini ? 'mdi-chevron-right' : 'mdi-chevron-left' }}
</v-icon>
Is it feasible to modify the icon when toggling between navigation drawer variants? The default variant should display the mdi-chevron-left icon, and when transitioning to the mini variant, the icon should switch to mdi-chevron-right. Can this be achieved? I haven't been able to locate any relevant information on this issue.
For a complete functional demo, you can find the code here
HTML:
<div id="app">
<v-app id="inspire">
<v-app-bar
color="primary"
dense
dark
>
<v-btn
icon
@click.stop="mini = !mini"
class="mr-2"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-toolbar-title>Page title</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer
class="deep-purple accent-4"
dark
permanent
v-model="drawer"
:mini-variant="mini"
>
<v-list>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<template v-slot:append>
<div class="pa-2">
<v-btn block>
<v-icon left>mdi-logout</v-icon>
Logout
</v-btn>
</div>
</template>
</v-navigation-drawer>
</v-app>
</div>
JAVASCRIPT:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
drawer: null,
mini: false,
items: [
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
{ title: 'Account', icon: 'mdi-account-box' },
{ title: 'Admin', icon: 'mdi-gavel' },
],
}
},
})