How to change icon's color?

Question

In my <v-toolbar> component, I want to set a text field search with the icon search prepended:

<v-text-field                                                                                                                                  
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field>

This works but it gives me this result I do not like:

I do not like it because I want both the text field and icon in white color, so I added the property background-color="white" to the previous code:

<v-text-field                                                                                                                                                          
    background-color="white"                                                                                                                                             
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field>

This gives me half of what I want:

How can change the color of that icon into white?

I did some search on Vuetify.js API but could not see an appropriate option there.

Possible duplicate of [Styling an icon defined with prepend-icon in Vuetify](https://stackoverflow.com/questions/50282241/styling-an-icon-defined-with-prepend-icon-in-vuetify) — Traxo, Sep 11 '18 at 10:51
your question help to me with following codes `filled light background-color="white"` thank you. — Mohamed Raza, Oct 28 '20 at 09:31

score 7 · Answer 1 · answered May 02 '19 at 13:57

Had a similar problem. So I show as example the color-picker with vuetify

<v-menu
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
>
    <v-text-field
       slot="activator"
       v-model="newClass.color.hex"
       label="color"
       readonly
    >
       <v-icon slot="prepend" :color="newClass.color.hex">
          format_color_fill
       </v-icon>
    </v-text-field>
    <material-picker v-model="newClass.color" />
 </v-menu>

Nika Kurashvili · Accepted Answer · 2018-09-11T07:37:34.217

6

You can override icon color by class

OR

You can use v-text-field class to override icon color, for example:

.hidden-sm-and-down .v-icon {
    color: white !important;
}

edited Sep 11 '18 at 07:37

answered Sep 11 '18 at 07:25

Nika Kurashvili

6,006
8
57
123

3

I edited my answer, I forgot dot in front of v-icon, it's a class not html tag – Nika Kurashvili Sep 11 '18 at 07:40
4

Please note that your answer promotes a [bad practice](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception) (w.r.t. `!important`) and has potential side effects. See an answer in the linked question. – Traxo Sep 11 '18 at 10:52

How to change icon's color?

2 Answers2