select2 Font-Awesome + text in TemplateResult not working properly

Question

I am attempting to use templateResult to format my select2 choices to include a fontawesome icon in front of the select text

unfortunately it is not working, even though i followed the documentation. The Font awesome icons display, but the text somehow lost in the translation

  function formatFA(icon) {

    if (!icon.id) { return icon.text; }
    var $icon = $(
      '<i class="fa fa-circle" style="color:green"></i> ' + icon.text + ' '
    );
    return $icon;

  };
  $('#gyr_ind').select2({
    templateResult: formatFA
  });

here is the js fiddle of the code to see what I'm talking about in action

http://jsfiddle.net/46f9c7jy/

Answer 1

icon.text is outside the <i> tag declaration like this $('<i></i>my-text'); which will not write the text inside the tag.

Something like this should work

var $icon = $('<i class="fa fa-circle"></i>')
  .css({ 'color': icon.text })
  .text(icon.text);

Here is a demo http://jsfiddle.net/dhirajbodicherla/46f9c7jy/3/

If the text has to be outside <i> then something like this should do

var $icon = $('<span></span>').append($('<i class="fa fa-circle"></i>').css({
    'color': icon.text
})).append(icon.text);

Here is another demo http://jsfiddle.net/dhirajbodicherla/46f9c7jy/4/