How to change Vuetify v-icon color in css

user_11890525 0
Viewed 16402

Vuetify v-icon usually takes its color with a class. In my case, I am trying to change its color with a css class menu-icon when my router link is active. 

        <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 ;
    }

The problem is v-icon does not seems to accept css color attribute. Is there a way to change it with css ?

vuetify.js vue.js
4 Answers

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

So you only need to set the color CSS value on .v-icon, and it will work:

Simple example: 

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

In CSS:

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

Working example: 

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>

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

Obviously, if you want to do it inline you can always go with the anti-pattern of inline style: 

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

Like any anti-pattern, it's not recommended. But it's possible.

user_18916770

Maybe this can help

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

Or if you want to change color using internal css, you can add a style tag like this at the end.

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

In my case, didn't work putting the color's name, but it worked putting the hexadecimal value:

<v-icon color="#933">mdi-close</v-icon>

Despite the fact that in the documentation of the Vuetify icons, you find that it works by putting the names. But is required put v-app tag in vue template. Let it start this way:

<template>
<v-app>        
<v-icon color="red">mdi-close</v-icon>
</v-app>
</template>
user_115035880

You should add to your css file:

.theme--light.v-icon,
.theme--dark.v-icon {
    color: inherit !important;
}
user_179760430
Related