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

Question

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 class="blue lighten-4" 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.

Answer 1

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

EDIT:

As @Adam Muse pointed out, a better solution could be adding the class on the <v-icon> tag:

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

Answer 2

Add the color to your v-icon

<v-icon color="blue lighten4">

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

you can also use class="blue--text" for text