JSFiddle - React, Tailwind, and code Playground

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" style="color:green"></i> ' + icon.text + ' '
    );
    return $icon;

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