Inline images and removing <p> tags

I'm trying to get various icons to show up inline as such:

image

When I put these icons in as images to text fields, they are automatically wrapped in

tags.

<p>Some text in a sentence</p>
<p><img /></p>
<p>second half of the same sentence</p>

I've found the documentation for the html serializer to remove the

tags, but this causes another issue in that now this is causing the HTML to end up as:

<p>Some text in a sentence</p>
<img />
<p>second half of the same sentence</p>

...which we don't feel will be optimal for SEO. Is there a way to have the HTML all be on the same line and end up more along the lines of:

<p>Some text in a sentence <img /> second half of the same sentence</p>

Hi Brett,

The only way to do this, is as you did, in the second example.

Are you using an icon library or manually adding icons as image like this?

The easiest solution is to use emojis. Another possibility is to use Rich Text Labels along with an icon library (and an HTML Serializer to convert the label and icon name into the proper icon element).

Thanks.