How should SVG icons best be applied to user-entered content?

Replacing icon fonts with inline SVG icons seems to be strongly recommended by many developers these days.

That makes sense for icons that can be hardcoded in theme files. But what about those that involve user-entered content?

For example, perhaps you want the user to be able to add a class to a list when writing a post in the backend, and it changes to use custom SVG icons as bullets.

Or perhaps all headings of a certain level need an icon underneath them used for styling, or a custom quote for a blockquote, etc.

Having post-processing code that parses the HTML output and inserts icons in the right places seems horrible (and wouldn’t work in a Gutenberg preview).

Having the SVG icons inside the CSS with background-image is plausible, but makes it awful if you want multiple color variations (eg matching the text color), as you have to hardcode a different SVG icon for every color.

Font icons make these all trivial. If those are to be avoided over SVG icons, what is the best approach?