Change icon color for v-select component

Question

I set an icon to v-select component but I want to change its color to red.

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col class="d-flex" cols="12" sm="6">
          <v-select
            :items="items"
            label="Standard"
            prepend-icon="edit"
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Codepen

How to colorize the icon ?

Does this answer your question? *[https://stackoverflow.com/questions/57361274/vuetify-how-to-specify-the-background-color-of-a-selected-item-in-v-select-comp](https://stackoverflow.com/questions/57361274/vuetify-how-to-specify-the-background-color-of-a-selected-item-in-v-select-comp)* — Ahmed Attalla, Jan 03 '20 at 13:16
It is not a clean solution there, thank you for the feedback. Actually I know the solution of this, I used it in the past, I just remembered it and it is listed in an answer below — Billal Begueradj, Jan 03 '20 at 13:41

score 6 · Accepted Answer · answered Jan 03 '20 at 13:26

6

Just use the slot prepend

<v-select
  :items="items"
  label="Standard">
  <template v-slot:prepend>
    <v-icon color="red">edit</v-icon>
  </template>
</v-select>

answered Jan 03 '20 at 13:26

depperm

10,606
4
43
67

Yes, this is a clean approach ... I used it some weeks ago, but I forgot it. Thank you – Billal Begueradj Jan 03 '20 at 13:45

score 2 · Answer 2 · answered Jan 03 '20 at 13:24

Check Vuetify documentation. https://vuetifyjs.com/en/components/selects#selects

If you inspect the example, the html is:

<i aria-hidden="true" class="v-icon notranslate material-icons theme--light">map</i>

Vuetify has abstract classes for colors. In this case: .theme--light.v-icon The documentation of colors is: https://vuetifyjs.com/en/styles/colors#

There you could select the color you want and via sass change it. Furthermore, you could set it like:

.v-icon {
  color: ##0F0F0F;
}

score 0 · Answer 3 · answered Jan 03 '20 at 14:25

You can change color simply using Markup

    <div id="app">
      <v-app id="inspire">
        <v-container fluid>
          <v-row align="center">
            <v-col class="d-flex" cols="12" sm="6">
              <v-select
                :items="items"
                label="Standard"
                prepend-icon="edit"
              >
                 <template v-slot:prepend>
                  <v-icon color="green">edit</v-icon>
                </template>
              </v-select>

            </v-col>
          </v-row>
        </v-container>
      </v-app>
    </div>

See link: https://codepen.io/pen/BaymmWQ

Change icon color for v-select component

3 Answers3