Advanced Select (Remote Data, Tags): CSS Icons

[akhayyat]

Summary

When using advanced select with remote data and tags, how can I show icons using CSS classes (no IMG tag)?

Detailed Description

When using advanced select tags (inline data), I can show icons without img tags, using CSS classes. For example (using country-flag-icons package):

<option value="100" data-hs-select-option="{
            "description": "IS",
            "icon": "<img class=\"inline-block rounded-full flag:IS\">"
        }">Iceland</option>

When I try to do the same using the remote data version of advanced select (tags), I can't find a way to make it work, since the apiFieldsMap.icon field uses the provided attribute as an img src attribute. An API that returns <img class="inline-block rounded-full flag:IS"> as the value of the attribute mapped to apiFieldsMap.icon results in the following HTML (obviously broken: img.src is an img tag):

<img class="max-w-full" alt="Iceland" src="<img class="inline-block rounded-full flag:IS">">

How can I template the entire img tag in this case, or just have the API specify img.class instead of img.src?

Use Cases

Using an API, set the icon without having to specify a src URL. For example, set the icon by defining the entire img tag or being able to provide img.class instead of img.src.