How could I add an ICONE inside a SELECT in HAML

Question

Hello, I would like to add icons (from source, like bootstrap for example) inside a select field in HAML, at first I am doing so, would that be possible? I thought about using the bootstrap list-dropdown as a lame measure, but it also didn’t work out so well...

- icons = ["icon-world", "icon-star-twohdd-o", "icon-users"] 
    %label.control-label
      = Activity.ht("activity_status_situation")
    %select{style: 'max-width: 300px; min-width: 150px', name: 'icons_milestone'}
      - for icon in icons do
        %option{value: "#{icon}", type: "", selected: ("")}
          %i.#{icon}
    

Thanks in advance!

Answer 1

I solved the problem as follows,

First, I added the scape line Markup,

  $(document).ready(function() {
    $(".js-select-icons").select2({
      minimumResultsForSearch: Infinity,
      escapeMarkup: function(m) { 
         return m; 
      }
    });
  });

Second, instead of closing with '<' and opening with '>' in select, it was opened with the HTML tag as follows:

   %select.js-select-icons{style: 'min-width: 50px', name: 'icons_milestone'}
  - for icon in icons do
     %option{value: "#{icon}", type: "", selected: ("")}
       = "<i class='#{icon}'></i>".html_safe

This way, it worked perfectly! And it stayed the following way,

I hope it helps and it’s clear...