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

1
votes

I want to use a phone icon (mdi-phone) as a prepend-inner in v-text-field.

I can write it like below and everything works fine:

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

the icon in this code changes color with the input state changes. if there is an error and input changes color to red, the icon's color changes to red as well.

but I wanted the icon to be rotated so I added the below code in <v-text-field></v-text-field>:

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

now the icon's color doesn't change with different input states (e.g: error,...).

is this a bug or there is way to fix it?

EDIT: This issue is being caused by vuetify overriding icon styles with dark theme properties. I rewrote the code as following:

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

1 Answers

0
votes

Try to pass the icon name as prop in order to take the same color of the input, then define a style rule to rotate the icon :

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

style :

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

LIVE DEMO