Select2: Images in options

data must be supplied as data: <JSON data with id, text and img> in real cases

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<select id="myval" style>
  <option value=""></option>
  <optgroup label="My First Group">
    <option value="0" style="background-color:#f0ac00;" data-active="0">Hello!!!</option>
    <option value="1" data-active="1">Dot Circle 1</option>
    <option value="2" data-active="0">Dot Circle 2</option>
  </optgroup>
  <optgroup label="My Second Group">
    <option value="2" data-active="0">Dot Circle 3</option>
    <option value="3" data-active="1">Dot Circle 4</option>
    <option value="3" data-active="0">Dot Circle 5</option>
  </optgroup>
</select>

CSS

.fa-dot-circle-o {
    color:green;
}

JavaScript

function format (option) {
			console.log(option);
			if (!option.id) { return option.text; }
			var ob = option.text + '<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w64" />';	// replace image source with option.img (available in JSON)
			return ob;
		};
    
  $("#myval").select2({
  		placeholder: "Select something!!",
	    width: "50%",
      allowClear: true,
	    templateResult: format,
	    templateSelection: function (option) {
	        if (option.id.length > 0 ) {
	            return option.text + "<i class='fa fa-dot-circle-o'></i>";
	        } else {
	            return option.text;
	        }
	    },
      escapeMarkup: function (m) {
				return m;
			}
	});