Icon on button is misaligned

[vopani]

Wave SDK Version, OS

v0.16.0 in Chrome on Mac

Actual behaviour

Icons in buttons are not vertically centre-aligned and looks odd.

Expected behaviour

Icons and text in a button should be at the same alignment.

Steps To Reproduce

You can see the icon is slightly above the text (I can also confirm that the text is correctly centred but the icon is not). It is true for all icons and checked with different texts and they all look weird.

[mturoci]

It is true for all icons

Not sure about this. Take Search icon for example:

The reason some icons are centered and some not depends on how they are clipped. The icon from your example NavigationBack has extra bottom space, which causes the visual inconsistence (It appears slightly up).

On the other hand, Search is clipped perfectly:

Same goes for Add:

I guess there is not much we can do about this as these is a bug of the Fluent Icon font.

[vopani]

:-(

[mturoci]

Seems like this is now possible to fix due to switching to SVG icons instead of font icons.

[vopani]

@mturoci Can you share an example here for reference purposes? Thanks!

[mturoci]

Sure.

Before

After

#837 (comment) still stands as some icons are not cropped properly, making it impossible to achieve centering perfection.