Icon/text wrapper component question

[jsnaras]

Hello,

I am wondering if there is an elegant way to build an "icon + text" component that would perfectly align with buttons (please see attached image) and would also have an "active" color applied to the icon.

I am currently using a combination of Flex/Icon/Text, however the icon fill does not feature an option with --iui-color-icon color applied. The vertical alignment of text looks off by a pixel as well.

Is the best course of action to build a simple wrapper component for myself or are there alternatives that I am missing?

I am using iTwinUI-React v3.11.3.

Thank you in advance!

[mayank99]

Hey, thanks for bringing this to our attention.

Firstly, I want to mention that the combination of Flex/Icon/Text is exactly the right way to approach this. So good job on figuring that out.

However, the Icon component not supporting the --iui-color-icon fill is an intentional decision. That particular color is meant for icons that are inside clickable elements (like buttons), whereas the Icon component is meant for static icons. Is there a reason you're looking for that color?

Now let me try to explain what's going on visually with the help of a screenshot. (I like your attention to detail in calling out this issue)

There are a few different things at play here:

1. The icons are actually centered (see blue lines in the screenshot) but they appear miasligned because the actual SVG glyphs are not evenly sized within the 16x16 box (e.g. the "+" icon is taller than the "×" icon).
   • Unfortunately this is a mistake in iTwinUI-icons. We have found this kind of size discrepency in many our icons. In the next evolution of our library, we are taking extra care to design icons that feel visually balanced.
2. There are inconsistencies in how browsers do text alignment (shown in red). In Firefox, the text outside the button is aligned with the text inside the button, but in Chrome and Safari, they are slightly misaligned. Unfortunately, there isn't much we can do here.
3. It is difficult to vertically align text with icons (in all browsers). CSS flex/grid centering does not guarantee that text and icons will be perfectly centered, especially when different kinds of elements are involved.
   • One way to improve this situation would be to do a bit of "manual visual adjustment". For example, you can translate the Icon on the Y-axis to make it feel better aligned. Since this kind of alignment differs based on the scenario, I don't think iTwinUI could handle this automatically for you.

Hope that helps! Please let us know if you have any further questions or if there's a way we can make this easier.