The "Bold" icon is not centered

[Reinmar]

It's more to the right.

[oleq]

It's a rendering issue in Chrome. Take a look at this screenshot:

In both cases, the pink rectangle is centered in the middle of the green rectangle in the image processor and put as an overlay over the button with an icon.

In the second alignment case, the alignment of the icon is different because the geometry of the toolbar has changed (wrapped items to the next line) which normally would not have any impact. They are the same toolbars.

This is what it looks like in FF (similar to the Chrome wrapped to the 2nd line):

And Safari (unlike any of the above):

It's the 21st century and we cannot get over CSS.

I suspect the cause of the issue is the inline-block positioning used for various elements, which depends on the font rendering engine of the web browser, which then is unique and not quite in line with the geometry is certain situations.

Some more reliable positioning strategies (block, inline-flex – they have been researched in #645) caused other issues with misalignment and responsiveness. It's a very tricky topic when you expect:

• the UI to be responsive (to the font size),
• all things to be aligned and perfectly centered,
• buttons with just icons to always stay square and of the same height as buttons with text.

[dkonopka]

Besides of browser rendering issues, the bold icon needs to be fixed (current size is 11.57px x 13.93px). I've rounded it and looks much better.

[Reinmar]

Will you do a PR?