Alignment of round icon in a heading h4

**Describe the bug**

Consider a h4 heading is containing text with an info icon next to it. The icon seems to float above the baseline. I think this is a visual oddity due to the shape of the icon with the round outline.

**To Reproduce**

Steps to reproduce the behavior:

1. Render this bit: `

Further reading

`
2. See rendered result

**Expected behavior**

The icon should appear on the header text baseline

**Screenshots**


**Desktop (please complete the following information):**

- OS: Ubuntu
- Browser Chrome
- Version 117

**Additional context**

We encountered this in https://github.com/canonical/lxd-ui/pull/483 where info icons are placed in headings for LXD-UI to link to the documentation. Temporary mitigation is adding some top margin to the icon, so it is pushed down a bit and appears aligned.

Start by rendering the provided h4 snippet and inspect the styles applied to p-icon--information alongside h4. Compare the icon’s baseline with the heading text and verify that the icon is visually aligned without the temporary top-margin workaround.

Written by the indexing model from the issue text.