Align SVG Icons Vertically with Text

[That Guy]

So making a simple Intranet page for work, I’m using Bootstrap and all is going great, problem I’m having is aligning the SVG Icons from the Bootstrap website.

Example:

<svg class="bi bi-exclamation-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>

I paste the above code next to any text and the vertical alignment is off (see below screenshots) even. I change the size off the icon.

I have tried a few code snippets from around the web but not found a fix, any have any ideas?

 

[That Guy]

Fonts can have some white space, try setting a smaller line height for it (equal to font size maybe) and make sure there's no margin on it.

For buttons you could set the parent container to display:flex and align-content: center to get things playing nicely. Flexbox is IE 10 plus only though of that's a concern.

Thanks for the suggestions sadly doesn’t fix the issue

 

[That Guy]

Thanks for the help peeps, the only reliable solution I found that worked consistently was to add the following styling to the SVGs in question:

margin-bottom: 4px;

Not sure if this is the correct way of doing it but seems to work Ross browser.