Vuetify: remove color transition from v-icon

Question

I have a menu with menu items consisting of both icon and text, with hover color styled with css below:

.v-list-item:hover {
    background: #0091DA;
}

.v-list-item:hover .v-list-item__title, .v-list-item:hover .v-icon {
    color: white;
}

The issue is text color changes instantly while icon color changes with a transition, and looks really strange.

Question: Can the transition on color change on v-icon be removed?

Please refer to example code below for the issue.

 new Vue({ el: '#app', vuetify: new Vuetify(), }); Vue.config.productionTip = false Vue.config.devtools = false

 .v-list-item:hover { background: #0091DA; }.v-list-item:hover.v-list-item__title, .v-list-item:hover.v-icon { color: white; }

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-content> <v-list dense> <v-list-item> <v-list-item-icon class="mr-0"> <v-icon small>mdi-message-text</v-icon> </v-list-item-icon> <v-list-item-title>Menu item 1</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-icon class="mr-0"> <v-icon small>mdi-dialpad</v-icon> </v-list-item-icon> <v-list-item-title>Menu item 2</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-icon class="mr-0"> <v-icon small>mdi-call-split</v-icon> </v-list-item-icon> <v-list-item-title>Menu item 3</v-list-item-title> </v-list-item> </v-list> </v-content> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Answer 1

Adding transition: none to the icon seems to do the trick:

.v-list-item .v-icon {
  transition: none !important;
}

Demo:

 new Vue({ el: '#app', vuetify: new Vuetify(), }); Vue.config.productionTip = false Vue.config.devtools = false

 .v-list-item:hover { background: #0091DA; }.v-list-item:hover.v-list-item__title, .v-list-item:hover.v-icon { color: white; }.v-list-item.v-icon { transition: none;important; }

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-list dense> <v-list-item> <v-list-item-icon class="mr-0"> <v-icon small>mdi-message-text</v-icon> </v-list-item-icon> <v-list-item-title>Menu item 1</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-icon class="mr-0"> <v-icon small>mdi-dialpad</v-icon> </v-list-item-icon> <v-list-item-title>Menu item 2</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-icon class="mr-0"> <v-icon small>mdi-call-split</v-icon> </v-list-item-icon> <v-list-item-title>Menu item 3</v-list-item-title> </v-list-item> </v-list> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>