[Bug Report] Inconsistent v-icon widths

Versions and Environment

Vuetify: 1.5.14 Vue: 2.6.10 Browsers: Chrome 74.0.3729.169 OS: Windows 10

Steps to reproduce

Create a v-icon element using Google’s Material Design icons (the default), and use mood_good as the icon. Compare the overall element width to a v-icon created using mood_bad or mood, for example.

Expected Behavior

Icon element should match the width of the icon graphic.

Actual Behavior

Icon element width is quite large, larger than the actual icon graphic. This causes issues when trying to get icons to line up next to each other in a row (as in the Codepen) or trying to center the affected icon(s) in a table cell, for example, as the icon is set to the left and the <i> container is much larger than the icon itself.

Reproduction Link

https://codepen.io/richdunajewski/pen/BerVRG

Other comments

Seems like the width roughly correlates to the width of the icon ligature name, at the given font size (before it is hidden).

[animald]

Regardless of whether the name of the icon was correct, this issue still exists. v-icon is the width of the text you enter to get the icon, if you have two icons, one with a longer name, they occupy differing spaces.

[KaelWD]

Duplicate of #6781

mood_good doesn’t exist.