How to change the color of the icons Vuetify?

<v-text-field v-model="searchValue"
:rules="validationRules"
type="search"
minlength="1"
maxlength="50"
autocomplete="true"
placeholder="Search"
 background-color="bg-white clear-shadow caption"
required
clearable
clear-icon="clear"
 class="py-0 my-0"
hide details
solo
dense
height="36"
prepend-inner-icon="search"
 />


@import "~/assets/scss/_colors";
@import "~/assets/scss/_functions";

.v-input {
 border-radius: 0 !important;

 color: red !important;

 .v-input__control {
 .v-input__slot {
 .v-input__prepend-inner {
 .v-input__icon {
.v-icon{
 color: red !important;
}
}
}
}
}
 input {
 max-height: inherit !important;
}

}

.theme--light.v-icon{
 color: red !important;
}


.v-input__control {
 .v-input__slot {
 .v-input__prepend-inner {
 .v-input__icon {
.v-icon{
 color: red !important;
}
}
}
}
}
.v-icon{
 color: red !important;
}
*{
 color: red !important;
}


.v-input--is-focused{
 color: color(pink) !important;
}
.primary--text{
 color: color(pink) !important;
}

The stylesheet is working, except the color of the icons in the input.

The color of the icon is not common, why?
April 7th 20 at 11:07
1 answer
April 7th 20 at 11:09
.v-icon{
 color: red !important;
}

<i class="material-icons">filter_list</i>

And why would he spread?

Use the built-in component. Instead
<i class="material-icons">filter_list</i>
use
<v-icon>md-filter_list</v-icon>
... or whatever you have set of icons connected

If necessary, you can individually specify the color for the button
<v-icon color="">md-filter_list</v-icon>

https://vuetifyjs.com/en/components/icons#icons
See the other question you cannot use vuetify 2 set of icons at the same time.

About what you wrote I already know and isoplug a set of icons from fa configs.

And also, we are talking about the icons in the form to kotoroya as you can see there is no access as of the styles and the html.
So your answer is off topic. - webster_Blick27 commented on April 7th 20 at 11:12
@webster_Blick27, At the time of writing the response, your example was different - Agustina.Cummerata49 commented on April 7th 20 at 11:15
@Agustina.Cummerata49, yeah, not that piece of code inserted. With the usual icons everything is OK. It is about
prepend-inner-icon="search"
clearable


And also, it is impossible without JS tricks to put events like @submit.prevent="submitFOrm()" how it should serch by clicking on the icon inside the field.

Yet, vuetify some problems and additional costs for the use of any tricks that would make banal things. And how it then to support, will see. - webster_Blick27 commented on April 7th 20 at 11:18

Find more questions by tags Vue.js