FAQ: Why don't Nimble icons align with text?

[rajsite]

🎙 Discussion

Question

Why don't Nimble icons align with text?

Answer

When icons are in a line of text (normal text, a nimble-anchor, etc.), the icons behave like images which rest on the same baseline as the text and the icons / images happen to have some whitespace in them:

That image shows the baseline horizontally which is inside the line height shown by the blue selected text (stuff like the underline fall below the baseline but inside the line height) and the bounds on the icon show that there is a little whitespace around the icon. Icons behave like images and rest on the baseline with text.

If you are trying to layout text, like this is a link in a paragraph of text. Then I'd probably mess with setting the vertical-align on the icons, i.e. vertical-align: -2px which moves it up or down from the baseline. And where icons need to be positioned on the base line to "look right" depends on the icon and the whitespace it has, etc.

If you are laying out the anchor like a standalone control or widget (i.e. not inside a paragraph of text but like a standalone button or text field). Then consider changing the display mode of the control to display: flex and use flex layout to position the icons.

Great reference that covers layout modes and goes over inline image behaviors: https://www.joshwcomeau.com/css/understanding-layout-algorithms/