vuetify v-text-field prepend-inner 插槽的图标不会随着输入状态的变化而改变颜色

Question

我想使用 phone 图标 (mdi-phone) 作为 v-text-field 中的 prepend-inner。

我可以像下面这样写，一切正常：

<v-text-field
    type="tel"
    v-if="!numberIsEntered"
    label="phone number"
    clearable
    required
    color="#ff5b1b"
    :rules="[
        rules.required,
        rules.internationalNumber,
        rules.nationalNumber
    ]"
    class="mt-10 mb-15"
    v-model="userLoginDetails.userNumber"
    outlined></v-text-field>

这段代码中的图标会随着输入状态的改变而改变颜色。如果出现错误并且输入颜色变为红色，则图标的颜色也变为红色。

但我想要旋转图标，所以我在 <v-text-field></v-text-field> 中添加了以下代码：

  <template v-slot:prepend-inner>
      <v-icon style="transform:rotateY(-180deg)">mdi-phone</v-icon>
  </template>

现在图标的颜色不会随着不同的输入状态（例如：错误，...）而改变。

这是一个错误还是有办法修复它？

编辑：此问题是由 vuetify 使用 dark 主题属性覆盖图标样式引起的。我重写了代码如下：

<template v-slot:prepend-inner>
    <i aria-hidden="true" class="v-icon notranslate mdi mdi-phone" 
        style="transform: rotateY(-180deg);"></i>
</template>

Answer 1

尝试将图标名称作为道具传递，以便采用与输入相同的颜色，然后定义一个样式规则来旋转图标：

<v-text-field
    type="tel"
     class="phone-input"
     prepend-inner-icon="mdi-phone"
   ...
    outlined></v-text-field>

风格：

.phone-input .v-icon{
  transform:rotateY(-180deg)
}

LIVE DEMO

vuetify v-text-field prepend-inner 插槽的图标不会随着输入状态的变化而改变颜色

vuetify v-text-field prepend-inner slot's icon isn't changing color with input state changes

vue.js

vuejs2

vuetify.js