== Background
Exposed by the testing of new relative sizing of certain token categories and by that certain Components like Thumbnail or Icon, we're more clear than ever about vertical alignment issues between icons/thumbnails and surrounding text, for example in Message, MenuItem or ButtonGroups all with their own challenges: `span.cdx-icon` and text not embedded in a tag, `span.cdx-icon` and block level elements with surrounding text etc.
== Potential resolutions
Exemplified caring about the button icons, there are few paths with pros and cons available:
1. We could separate out rules for icon-only buttons for perfect rendering with Flexbox. But then we'd have different positioning of icon-only and icon + text buttons. Also we would have to invent an icon-only ToggleButton class. Maybe not a bad idea anyways, to be equal to Button. But the patch would grow and grow
2. We could only have an approximation of positioning to perfect center on all font sizes with vertical alignment and Flexbox, that would at least have icons always slightly uncentered displayed in all button types
3. We could add a span around the textual content to rule icon and button text separately, but that would mean a lot more code and customization either
**Screens on ButtonGroups**
|{F36175447} `vertical-align: text-bottom` (current at 16px base font size) | {F36175449} `vertical-align: text-bottom` (14)
| {F36175452} `vertical-align: middle` (16) | {F36175455} `vertical-align: middle` (14)
**Developer notes**
Note, that Flexbox is of no help here, cause going from `inline-flex` to `flex` would result in text being underneath icon without extra `span`.