JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<select id="gyr_ind" name="gyr_ind" class="select2 form-control">
    <!---style="font-family:'FontAwesome', Arial;">--->
    <option value="G">green</option>
    <option value="Y">yellow</option>
    <option value="R">red</option>
    <!--- <option value="G" data-icon="fa-circle" style="color:green">green</option>
    <option value="Y">&##xf042; yellow</option>
    <option value="R">&##xf111; red</option>
    --->
</select>

CSS

.select2 {
    width:100%;
}

JavaScript

function formatFA(icon) {

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

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