Css Vuetify：从v图标中删除颜色转换

我有一个菜单，菜单项由图标和文本组成，悬停颜色采用css样式，如下所示：

.v-list-item:悬停{
背景#0091DA；
}
.v-list-item:hover.v-list-item_uu标题，.v-list-item:hover.v-icon{
颜色：白色；
}

问题是，当图标颜色随过渡而改变时，文本颜色会立即改变，看起来非常奇怪

问题：是否可以删除

v-icon

上的颜色变化过渡

有关此问题，请参阅下面的示例代码

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
});
Vue.config.productionTip=false
Vue.config.devtools=false

.v-list-item:悬停{
背景#0091DA；
}
.v-list-item:hover.v-list-item_uu标题，.v-list-item:hover.v-icon{
颜色：白色；
}

mdi消息文本
菜单项1
拨号板
菜单项2
mdi呼叫拆分
菜单项3

向图标添加

转换：无

，似乎可以达到以下目的：

.v-list-item.v-icon{
过渡：无！重要；
}

演示：

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
});
Vue.config.productionTip=false
Vue.config.devtools=false

.v-list-item:悬停{
背景#0091DA；
}
.v-list-item:hover.v-list-item_uu标题，.v-list-item:hover.v-icon{
颜色：白色；
}
.v-list-item.v-icon{
过渡：无！重要；
}

mdi消息文本
菜单项1
拨号板
菜单项2
mdi呼叫拆分
菜单项3