如何在 css 中更改 Vuetify v-icon 颜色

Question

Vuetify v-icon 通常采用类的颜色。就我而言，当我的路由器链接处于活动状态时，我正在尝试使用 css 类 menu-icon 更改其颜色。

         <v-btn icon class="menu-btn">
            <router-link to="/client/dashboard">
                <v-icon class="menu-icon">
                    mdi-gauge-full
                </v-icon>
                <div class="menu-titles">Dashboard</div>
            </router-link>
        </v-btn>

     .router-link-active .menu-icon {
        color: #2F80ED ;
    }

问题是 v-icon 似乎不接受 css 颜色属性。有没有办法用 css 改变它？

原文由 Philx94 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<v-icon> uses the value of its CSS color property and maps it into the fill property of it’s SVG children (using fill="currentColor" ).

所以你只需要在 --- 上设置 .v-icon color CSS 值，它就会起作用：

简单示例：

 <v-icon large>mdi-domain</v-icon>

在 CSS 中：

 i.v-icon.v-icon {
  color: red;
}

工作示例：

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

 i.v-icon.v-icon {
  color: red;
}

 <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">
<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>

<div id="app">
  <v-app>
    <v-content>
      <v-icon>mdi-domain</v-icon>
    </v-content>
  </v-app>
</div>

我建议不要使用 !important 。

By default, Vuetify sets the color of icons using a 2 × class specificity (ie: .theme--light.v-icon ), so we need to use something slightly higher i.v-icon.v-icon ( 1 × el + 2 × class )。

---

显然，如果你想内联，你总是可以使用内联样式的 反模式：

 <v-icon large style="color: red;">mdi-domain</v-icon>

与任何反模式一样， 不推荐 这样做。但这是可能的。

原文由 tao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

也许这可以帮助

    <v-icon large color="green darken-2">mdi-domain</v-icon>

或者如果你想使用内部 css 改变颜色，你可以在最后添加这样的样式标签。

 <style lang="scss" >
.classname {
  color: red !important;
}
</style>

原文由 beingyogi 发布，翻译遵循 CC BY-SA 4.0 许可协议