如何在Vuetify中的卡片上方/上方创建居中浮动图标？

我是Vuetify的新手，我想弄清楚如何使用Vuetify组件和道具等在卡的顶部获得一个浮动的图标气泡。我认为av-badge是最适合使用的组件，但是我我不确定。我正在尝试实现类似的功能，但是在蓝色圆圈内带有一个图标：

我一直在尝试这样的事情v-card：

<v-badge overlap icon="mdi-shield-account"></v-badge>

我一直在offset-x和offset-yprops玩，但是由于卡的宽度可能会根据屏幕尺寸而变化，因此我不确定是否适合固定偏移量。我不想退缩到不必要地将自定义类和样式粘贴到每个Vuetify组件上。有没有更“ Vuetiful”的方式来做到这一点？

我的全卡看起来像这样：

<v-card outlined class="px-5 py-5">
  <v-badge overlap icon="mdi-shield-account"></v-badge>
  <v-form ref="form-personal">
    <v-text-field label="Firstname" prepend-icon="mdi-map-marker"></v-text-field>
    <v-text-field label="Lastname" prepend-icon="mdi-map-marker"></v-text-field>
  </v-form>
</v-card>