How to change Vuetify icon color?

Question

Vue.js

<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 style file is working, except for the color of the icons in the input.

The color on the icon is not common, why?

Answer 1

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

<i class="material-icons">filter_list</i>
And why would he spread?
Use an inline component. Instead , use ... or whatever icon set you have connected. If necessary, you can specify the color individually for the button https://vuetifyjs.com/en/components/icons#icons
<i class="material-icons">filter_list</i>
<v-icon>md-filter_list</v-icon>
<v-icon color="">md-filter_list</v-icon>