<div id="icon"></div>
<select id="select" name="threads-icon" class="fa-select"></select>

body {
  text-align: center;
  margin: 10px;
}

.select2,
.select2-container {
	text-align: left;
}

#icon {
  margin: 75vh 0 10px;
}

$.get('https://raw.githubusercontent.com/FortAwesome/Font-Awesome/fa-4/src/icons.yml', function(data) {
  
	var parsedYaml = jsyaml.load(data);
	$.each(parsedYaml.icons, function(index, icon){
    $('#select').append('<option value="fa-' + icon.id + '">' + icon.id + '</option>');
  });
	
	$('#select').select2();
	$("#icon").html('<i class="fa fa-2x ' + $('#select').val() + '"></i>');
});

// Detect any change of option
$("#select").change(function(){
  var icono = $(this).val();
	$("#icon").html('<i class="fa fa-2x ' + icono + '"></i>');
});