Is it possible define a route-link inside v-icon?

Question

It is my firt time using vue.js. Is it possible include a to router-link inside v-icon? similiar to we use a tag between

Header Component

<template>  
    <v-app-bar app>

             <span class="group pa-2">
              <v-icon medium>mdi-home</v-icon>
             </span>


</template>

Answer 1

Wrap it in a v-btn icon

<v-btn icon :to="{ name: 'foo', params: { id:id }}">
     <v-icon>  mdi-pencil </v-icon>
</v-btn>

Answer 2

Try this solution

<v-btn  icon id="no-background-hover" to="/home">
 <span class="group pa-2">
    <v-icon medium>mdi-home</v-icon>
    </span>
 </v-btn>


<style lang="scss">
#no-background-hover::before {
   background-color: transparent !important; <= can set to any color you want
}
</style>

Hope useful