更改 v-select 组件的图标颜色 [重复]答案

【问题标题】：Change icon color for v-select component [duplicate]更改 v-select 组件的图标颜色 [重复]
【发布时间】：2020-01-03 13:13:10
【问题描述】：

我为v-select 组件设置了一个图标，但我想将其颜色更改为红色。

<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

如何给图标上色？

【问题讨论】：

这能回答你的问题吗？ https://stackoverflow.com/questions/57361274/vuetify-how-to-specify-the-background-color-of-a-selected-item-in-v-select-comp
那里不是一个干净的解决方案，感谢您的反馈。其实我知道这个的解决方案，我以前用过，我只记得它，它列在下面的答案中

标签： javascript vue.js vuetify.js

【解决方案1】：

查看 Vuetify 文档。 https://vuetifyjs.com/en/components/selects#selects

如果您检查示例，则 html 为：

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

Vuetify 有颜色的抽象类。在这种情况下：.theme--light.v-icon 颜色的文档是： https://vuetifyjs.com/en/styles/colors#

在那里你可以选择你想要的颜色并通过 sass 改变它。此外，您可以将其设置为：

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

【讨论】：

【解决方案2】：

只需使用插槽前置

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

【讨论】：

是的，这是一种干净的方法......我几周前使用过它，但我忘记了。谢谢

【解决方案3】：

您可以简单地使用标记更改颜色

    <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>

查看链接：https://codepen.io/pen/BaymmWQ

【讨论】：