Change color and icon of input file component in Vuetify.js

Question

How to change the icon and color of the v-file-input component in Vuetify ?

For v-text-field and other component, the slot approach works, but for this component I can not get it work:

<div id="app">
  <v-app id="inspire">
    <v-file-input show-size label="File input">
      <template v-slot:prepend>
         <v-tooltip bottom>
            <template v-slot:activator="{ on }">
               <v-icon v-on="on" color="yellow lighten-3">
                  notes
               </v-icon>
           </template>
        </v-tooltip>
     </template>
    </v-file-input>
  </v-app>
</div>

Codepen.

Does moving the color to the actual v-file-input component, gives the result you're searching for, or do you only want to color the icon? — Jesper
– Jesper, Commented Dec 20, 2019 at 11:56

Michal Levý · Accepted Answer · 2019-12-20 12:40:19Z

3

Because it doesn't have prepend slot. You can change icon with prepend-icon prop but not the color. You can go to Vuetify Github and make a feature request.

In the meanwhile, you can also use following little hack (works only because you using MDI icons with CSS/webfont)

In your css file:

.mdi-myFileIcon::before {
  content: "\F39A";
  color: blue;
}

<v-file-input show-size label="File input" prepend-icon="mdi-myFileIcon" />

answered Dec 20, 2019 at 12:40

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jesper Over a year ago

Didn't think of using CSS, not stupid at all, for a workaround

Michal Levý Over a year ago

@Begueradj BTW there is open issue for your problem. You can go like it and watch it for updates....

Billal BEGUERADJ Over a year ago

My god, you follow everything :) thank you very much for sharing the link.

Michal Levý Over a year ago

I'm just using Vuetify myself so I would like to see it fixed too ;)

Jesper · Accepted Answer · 2019-12-20 12:09:18Z

1

The v-file-input doesn't utilize the same slots as the v-text-field, so unfortunately it's actually not possible at the moment, to set the icon the way you're trying.

The options you have to change the color by changing the color of the whole component. And for the icon, you can only change it by using the prepend-icon prop.

But this would be an actual feature request to post on the Github of Vuetify, would be great to actually achieve what you want for everyone.

answered Dec 20, 2019 at 12:09

Jesper

3,8422 gold badges18 silver badges24 bronze badges

1 Comment

Billal BEGUERADJ Over a year ago

Thank you for the feedback. I will leave my question open for few days just in case if an other code guru says something else :)

Collectives™ on Stack Overflow

Change color and icon of input file component in Vuetify.js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related