[Bug Report] v-badge icon is not centered

[ghost]

Environment

Vuetify Version: 2.3.9
Vue Version: 2.6.11
Browsers: Firefox 79.0
OS: Ubuntu 20.04

Steps to reproduce

Set the icon prop on a v-badge component

Expected Behavior

Icon is centered on badge

Actual Behavior

Icon is leaned towards the bottom and not centered

Reproduction Link

https://codepen.io/caesarivs/pen/zYqKJwz

[ElSamhaa]

not just v-badge actually, all pressable icons (at least) are not perfectly centered relative to its circle nor ripple. I've measured its proportions in many different symmetric icons (e.g. plus, minus, ...) and found out they are deviated by 1-2px.

[ghost]

@ElSamhaa I don't think all icons:

<v-btn icon>
  <v-icon>mdi-circle</v-icon>
</v-btn>

Renders a centered circle, I've updated the codepen to reflect this, since that's kind of the expected output with the badge component.

[ghost]

I've found a workaround:

Using the badge slot and centering the icon using flexbox.

Codepen is updated showing this approach

[nekosaur]

In v3 the icon is positioned using align-items: center and justify-content: center inside the badge.

[KaelWD]

Broken again by bc7d409