Javascript 将图标添加到select2，而不是基于值

我正在使用select2创建漂亮的下拉列表。现在，我正在寻找一种将图标/图像添加到下拉元素的方法。我想要这样的东西：

<script type="text/javascript">
    $(document).ready(function() {
        $('#iconStyledDropdown').select2();
    });
</script>    

<select id="iconStyledDropdown">
    <option value="firstIcon"><span class="icon1"></span>First icon</option>
    <option value="anotherFirstIcon"><span class="icon1"></span>Another first icon</option>
    <option value="secondIcon"><span class="icon2"></span>Second icon</option>
    <option value="lastEntry"><span class="icon2"></span>Last entry</option>
</select>

$('#iconStyledDropdown').select2({
   templateResult: addIcon
 });

$（文档）.ready（函数（）{
$（'iconStyledDropdown'）。选择2（）；
});
第一个图标
另一个第一个图标
第二个图标
最后一项

---

我知道，但此样式是基于选项的文本/值。我需要一种手动定义图标的方法。

如果可能，您可以向选项本身添加一个

类。然后可以使用
state.element.className
来获得正确的图标

<select id="iconStyledDropdown">
<option value="firstIcon" class="icon1">First icon</option>
<option value="anotherFirstIcon" class="icon1">Another first icon</option>
<option value="secondIcon" class="icon2">Second icon</option>
<option value="lastEntry"class="icon2">Last entry</option>

$('#iconStyledDropdown').select2({
   templateResult: addIcon
 });