select2 Font-Awesome + text in TemplateResult not working properly -

i attempting use templateresult format select2 choices include fontawesome icon in front of select text

unfortunately not working, though followed documentation. font awesome icons display, text somehow lost in 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 js fiddle of code see i'm talking in action

http://jsfiddle.net/46f9c7jy/

icon.text outside <i> tag declaration $('<i></i>my-text'); not write text inside tag.

something should work

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

here demo http://jsfiddle.net/dhirajbodicherla/46f9c7jy/3/

if text has outside <i> should do

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

here demo http://jsfiddle.net/dhirajbodicherla/46f9c7jy/4/