Presence of icon in GlBadge changes baseline alignment
As discovered in https://gitlab.com/gitlab-org/gitlab/-/issues/344389#note_803507757 and https://gitlab.com/gitlab-org/gitlab/-/merge_requests/77851, the presense of an icon in a `GlBadge` changes the baseline alignment of the badges.
Here's a screenshot demonstrating the problem:
The only difference between those two badges is that one has an icon, while the other doesn't. The source for that example is simply:
```html
<div>
Some text
<gl-badge>TestBadge</gl-badge>
more text
<gl-badge icon="branch">TestBadge</gl-badge>
the last text.
</div>
```
I would argue this is a ~"type::bug" in `GlBadge`'s styling, as the presence of an icon shouldn't change the baseline of the badge itself.
I think the cause is a combination of:
- `svg` elements being `display: inline` by default
- icons in `GlBadge` have a height of 16px, whereas the font has a line-height of 14px
- `GlBadge` being `display: flex; align-items: center`
issue