Demo of Menu JQuery UI icon option

JQuery UI list of Icons

HTML

<ul id='my_menu'>
<li><div>Education</div></li>
<li><div>Job</div></li>
<li><div>Fruits</div>
<ul>
<li><div>Mango</div></li>
<li><div>Banana</div></li>
<li><div>Orange</div></li>
<li><div>Apple</div></li>
</ul>
</li>
<li><div>Vehicle</div></li>
<li><div>Games</div>
<ul>
<li><div>Football</div></li>
<li><div>Tennis</div>
<ul>
<li><div>Lawn Tennis</div></li>
<li><div>Table Tennis</div></li>
</ul>
</li>
<li><div>Golf</div></li>
<li><div>Badminton</div></li>
</ul></li>
<li><div>Dresses</div></li>
</ul>

<div id=d1></div>
<br>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='ui-icon-circle-triangle-e' checked>ui-icon-circle-triangle-e</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value=' ui-icon-caret-1-e' > ui-icon-caret-1-e</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value=' ui-icon-arrow-1-e' > ui-icon-arrow-1-e</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-icon-arrowthick-1-e' >ui-icon-arrowthick-1-e</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value=' ui-icon-triangle-1-e' > ui-icon-triangle-1-e</label>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e" }
});
///////////////
var icons_used = $( "#my_menu" ).menu( "option", "icons" );
$('#d1').html( " <b>Icons Used    :  </b>: " + icons_used.submenu );
//////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#my_menu" ).menu( "option", "icons", { submenu: sel } );
var icons_used = $( "#my_menu" ).menu( "option", "icons" );
$('#d1').html( " <b>Icons Used    :  </b>: " + icons_used.submenu );
})
////////////
})
</script>