Expected Behavior / features: In forms, I wish I could select an item from a list of Country or Currency or any type of Category from a text name but prefixed by the corresponding flag/icon font/image to make the selection more visual, requiring features like :

1. Material select to work with Icon fonts
2. Icon image or font to be placed before the Text
3. Image/icon to be still visible when focus is out of the field
4. Keypressing (ideally) a letter eg "F" to quickly select from the list the first entry Finland, France...

Actual Behavior On MDB current sample of select with icon : image could be specified by a link in eg. <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">example 1</option> but :

1. No way to reference an font icon like https://fontawesome.com or google material icons with this type of notation <i class="material-icons md-36">category</i>
2. images/icon could not be place before text, but only after text - aligned right - and styled with class="rounded-circle"
3. Image (for the selected item) is not visible anymore when selection is done / focus is out the field
4. Keypress a letter doesn't select the corresponding options

Any suggestion welcomed to enrich MDB select with icon with above requirements or I may have to explore the bootstrap only options... !!!

Resources (screenshots, code snippets etc.) After research I managed to refer to a transparent Svg and an in-css-defined-svg background image which gives more control on some parameters like fill color/ size. But still not as easy to use as font icons to my opinion and still missing some of the above requirements.

HTML :

<option value="" data-icon="120px-Placeholder_4-3.svg" class="iconme-event">example
    2</option>

CSS :

<style>
.iconme-event {
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m 20.4,21.6 -16.8,0 0,-13.2 16.8,0 M 16.8,0 l 0,2.4 -9.6,0 0,-2.4 -2.4,0 0,2.4 -1.2,0 C 2.268,2.4 1.2,3.468 1.2,4.8 l 0,16.8 A 2.4,2.4 0 0 0 3.6,24 l 16.8,0 a 2.4,2.4 0 0 0 2.4,-2.4 l 0,-16.8 c 0,-1.332 -1.08,-2.4 -2.4,-2.4 l -1.2,0 0,-2.4 m -1.2,13.2 -6,0 0,6 6,0 0,-6 z"></path></svg>') center center no-repeat;
    width:10px;
    height:10px;
    position: relative;
    top:0; left:0; z-index:1000;
    background-color:#fff;
}
</style>