APEX

I'm tring to reproduce this,

A Select One with flags.

I have a countries table with name and id where the id is the two digit lowercase letter code.

And here is my select for the Select One.

SELECT
trim(name) AS D,
trim(country_id) AS R
FROM
countries
ORDER BY
trim(name)

which returns this,

And I have configured my
Value HTML Expression in settings to this:

<span class="fa fa-flag-&R." aria-hidden="true"></span> &D.

But all that I get in my list is the name of the country and not the flag and name?

And yes my Apex version is:

Oracle APEX 24.2.8

And I also tried the Shared LOV, like this.

SELECT
   trim(name) AS COUNTRY_NAME,
   trim(country_id) AS COUNTRY_CODE
FROM
   countries
ORDER BY
   trim(name)

And mapped the return column to COUNTRY_CODE and display to COUNTRY_NAME.

And used this for my Value HTML Expression .

<span class="fa fa-flag-&COUNTRY\_CODE." aria-hidden="true"></span> &COUNTRY_NAME.

And then selected that LOV and pointed it the the shared, and all I get is the Country name in the list.

And I confirmed the fonts are working by creating a dummy region with the following html code.

<p>Testing Font APEX 2.4:</p>
<span class="fa fa-2x fa-flag-ca" aria-hidden="true"></span>
<span class="fa fa-2x fa-flag-jp" aria-hidden="true"></span>
<span class="fa fa-2x fa-flag-de" aria-hidden="true"></span>

Thanks for any help..

Bob