How to take button icon from data while using v-for

Question

I have a data like this:

subclasses: [
        {
          title: "Ancestral Guardian",
          value: 1,
          icon:"mdi-book"
        },
        {
          title: "Battlerager",
          value: 2,
          icon:"mdi-school"
        },

I want to use the icon value for buttons that are generated in for loop

I tried to do this but it didn't work:

                <v-col v-for="sub in subclasses" :key="sub.sub">
                  <div class="d-flex justify-center">
                    <v-btn               
                    @click="goTo(sub.title)"
                    class=" pa-3 mb-2 "
                    color="rgb(54, 61, 68)"
                    icon={{sub.icon}}
                    >
                  </v-btn>
                  </div>
                    <p class="text-center">{{ sub.title }}</p>
                </v-col>

Answer 1

Like I post in the comment, you can use append-icon and prepend-icon then bind it.

But other way is to add v-icon inside the v-btn tag.

Demo