Icon vertical alignment and size issues

[tmorehouse]

Icon vertical alignment and size issues

[passananteg]

If you add the class d-flex on a button you can add the class align-items-center to the icon and it will be aligned to the middle

[mariusa]

The fix that works for me is moving the icons slightly up, not more down:

 vertical-align: 0.125em;

Original bootstrap 4.x, no change, using icon font 1.3.x

With vertical-align: 0.125em;

[kanine]

This issue still seems present in 1.5.0 release where an inline SVG is not correctly aligning with text. It appears to be due to the vertical-align being overridden by the definition in _reboot.scss

img, svg { vertical-align: middle; }

This is taking precedence over the icons.css.

As a work around I've been including this style in my projects.
svg.bi {vertical-align: -0.125em;}

vs

[mdo]

Reminded of this after #601. Seems I need to revisit this and wouldn't mind any help or additional recommendations :).

[mdo]

Opened #701 to address it.

[blackblather]

Same happening to me.

Also found this workaround in the stylesheet for the headers example (in headers.css file) from the examples page page.

Why not just add it to the official bootstrap 5 css?
Am I missing something? Would it break something to add it by default?