How to change Vuetify v-icon color in css

Question

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 ?

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

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(), })

 iv-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 (ie: .theme--light.v-icon ), so we need to use something slightly higher iv-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.

Answer 2

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>

Answer 3

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.

Answer 4

You should add to your css file:

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