Vuetify button icon with inline text - user-interface

Question

what I would like to achieve is a v-chip that act as a button and not like something to select...
So far I tried:
<v-btn icon>
<v-avatar>
<img :src="user.avatar" />
</v-avatar>
My Text
</v-btn>
But it is not looking as expected...
I also tried to wrap everything inside a chip but even here I can not manage to let it work properly...
Can someone explain how can I do it? Basically in my top toolbar I need to display the user icon with its name on the right, it should be inline with other v-btn icon elements and also, by clicking on the chip/btn it should open a dropdown...
Of course I don't need all this from you, just to understand how to create a icon button with some inline text on the right...
Thanks

Answer 1

I used v-chip to create a icon with text inline and used css to change the pointer of v-chip, wrapped with v-hover to maintain the elevation on hover and lastly wrapped v-hover by v-menu to show dropdown menu list when v-chip is clicked.
<div id="app">
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-hover>
<v-chip slot-scope="{ hover }"
:class="`elevation-${hover ? 5 : 2}`" v-ripple color="indigo" text-color="white" v-on="on">
<v-avatar>
<v-icon>account_circle</v-icon>
</v-avatar>
Sagar
</v-chip>
</v-hover>
</template>
<v-list>
<v-list-tile
v-for="(item, i) in items"
:key="i"
#click=""
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' }
],
}
}
})
</script>
<style>
.v-chip .v-chip__content{
cursor: pointer;
}
</style>