Icons drawn inline with text

[skjalgepalg]

Presently we icons are drawn centred on a 24px * 24px square.

When we need to draw an icon alongside text the icon will hover above the text baseline by however much the gap to the border of the icon grid is. To counter this, developers will need to manually adjust the placement of such icons. Because the icons scale with font-size this manual adjustment must be redone for every different font-size (e.g. headers, quotes etc.). It is also necessary to re-adjust when icons are swapped out due to different gaps to the icon pixel-grid edge.

Thanks to @gesi for raising this issue to my attention.

Do we need to create an inline-version of all icons or is there a solution here that solves inline placement?

Here is a codepen that illustrates the issue