Disabled block switcher icons are blurry

[kjellr]

When the block switcher is disabled, the block icon inside of it appears smaller than it should, resulting in some blurry icons on non-retina screens. Here's the Container block icon for instance, appearing at 20px wide:

For comparison, here's a non-disabled icon, which renders at the correct 24px wide:

The issue appears to be that when the toolbar icon appears disabled like that, the IconButton parent gets a has-text class, which adds a 4px right margin to the child SVG. Removing that rule renders the icon at the correct size:

To fix, I suppose we can negate this with an extra style rule inside of editor-block-switcher__no-switcher-icon, but I'm wondering if this has-text class is needed here in the first place? Should that be removed in this case?

cc @jasmussen
Related: #13721

[jasmussen]

Argh, good catch. I could swear we had this fixed :(

Yes: #13767. It echoes this comment too: #13767 (comment)

What's a good way to fix this? @gziolo my favorite person to ping, any tips?

[gziolo]

Is #15643 proposing the proper fix?

It looks like IconButton has a very unexpected logic for adding has-text class. It adds it when children prop is passed which was the case. However, an icon isn't really the text 🤷‍♂

[jasmussen]

According to Kjell it does, amazing thank you!