Make prop for prepend / append icon color

[Joebayld]

I find that I'm constantly styling my buttons to have just the icon colored. I'm using the following code to do so:

<template v-slot:prepend>
  <v-icon color="success"></v-icon>
</template>

While this works fine, it ends up being a lot of code in the project just to change colors of the icon. Is it possible to add a prop to the buttons to color this? Even if I extend the component myself and it's only for my project? Ideally it would be in the API but that's not my call.

Looking for something like:

 <v-btn  
  prepend-icon="mdi-close-circle" 
  prepend-icon-color="red">
    Close
</v-btn>

[yuwu9145]

Are you trying to set icon colour different from default text colour?

[Joebayld]

Yes exactly. Keeping the text the default and just color the icon.

[yuwu9145]

Try defaults-provider. demo

[Joebayld]

Thanks for this.

Is there a way to inject a prop on each component though? I still would like the ability to modify the colors per button but with less code.

Could this help added to the standard API?

[yuwu9145]

defaults-provider is designed to inject default prop values to each child component, it should cover most cases.

Was there any use case in your project that cannot be resolved by it?

[KaelWD]

https://vuetifyjs.com/en/features/global-configuration/#contextual-defaults