Optgroup breaks special characters

Question

I need to a add an icon from Fontawesome to an option of a selector. It works fine, unless I use optgroup

<select>
    <optgroup label="group name">
        <option>opt1 &#xf042;</option>
        <option>opt2 &#xf043;</option>
    </optgroup>
    <option>opt3 &#xf042;</option>
    <option>opt4 &#xf043;</option>
</select>

Here's JSfiddle.

Any ideas why?

Answer 1

I updated your fiddle to use external resources.

It imports a javascript file and a css file, and the icons show now.

If you make an account on FontAwesome they will send you a link. Try the below in your code and see if it works, I'm betting it will.

<link rel="stylesheet" type="text/css" href="https://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<script type="text/javascript" src="https://use.fontawesome.com/cec949909c.js"></script>

Answer 2

Fiddle doesn't work on Windows 8.1 (latest FF + IE11), looks like there is something with the select from the OS. Even without optgroup it still does not work, so optgroupt has nothing to do with it.

Looks like this answer is still valid. Workaround: use jQuery plugins instead.