Material select with Images or Font Icon placed before the T

web
mobile

Topic: Material select with Images or Font Icon placed before the Text (and still visible when focus out)

Olivier PEUZE pro premium asked 7 months ago

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>

newtech2018 pro premium commented 1 months ago

Great description on how you solved this issue. I'm trying to take this to the next level. I have a SVG that is a square and I need the color to change based on the hex in my foreach loop that is building the options (like a color swatch selection). I have tried several things and cannot get to work yet.


Piotr Obrebski staff commented 1 months ago

Great to hear that. Please share your results with us whenever your solution is ready.


Sebastian Kaczmarek staff pro premium answered 7 months ago

Thanks for your report. We will consider adding such features in the future releases.


Please insert min. 20 characters.