feat(Icon): Add invisble text content to simplify baseline alignment

[VincentSmedinga]

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

This lets the browser use baseline alignment to align an icon with text. We make the icon adhere to that feature by adding a zero-width space to its ::after pseudo-element.

Why

It seems more idiomatic to use the browser’s baseline alignment feature to align an icon to accompanying text. We still need to apply typography to the icon, but that’s logical: we treat an icon as a typographic element. Stretching the icon and the pseudo-element and using a width of 1em are more examples of using what CSS offers us. We don’t need to multiply font size with line height anymore, and we don’t need to manually size the SVG while we were already sizing its container.

How

See above.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• n/a

[alimpens]

Nice, this approach is way cleaner!