How to use lighten or darken colors as background of a v-btn in Vuetify?-CodePudding

I have a button like this on vuetify:

<v-btn color="blue" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

And the result is this:

Now I try to do this:

<v-btn  icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

But the result is this:

While I was expecting just a lightened colour.

How can I achieve my goal? Note that here vuejs 2 is used.

CodePudding user response：

I solved it by writing this:

<v-btn color="blue--text text--lighten-4" icon>
  <v-icon>mdi-pencil</v-icon>
</v-btn>

This is because the icon is considered as text and not as background

CodePudding user response：

Add the color to your v-icon

<v-icon color="blue">

I'd avoid in-line stying it with blue--text