<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<div class="col input-field col s6" >
<option value="" disabled selected>Select An option</option>
<option value="1" data-icon="https://www.tutorialsplane.com/wp-content/uploads/2016/12/profile.000.jpg" class="circle">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<label>Select Option With Image Right</label>
<div class="col input-field col s6">
<option value="" disabled selected>Select An option</option>
<option value="1" data-icon="https://www.tutorialsplane.com/wp-content/uploads/2016/12/profile.000.jpg" class="left circle">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<label>Select Option With Image Left </label>
$(document).ready(function() { $('select').material_select();