title: Toggle the button icon in jQuery UI
body: <p>I am using jquery UI button with its icon. I want to toggle the icon of the button onclick, its working but icons are overriding :</p>
  
  <pre><code>/* initialize the button at document.ready event */
  $("#buttonid"). button({ icons: { primary: 'ui-icon-play'} });
  
  /* binding event */
  $("#buttonid").toggle(
  function () { 
    /* code */ 
    $(this).button({ icons: { primary: 'ui-icon-play'} }); }, 
  function () { 
    /* code */ 
    $(this).button({ icons: { primary: 'ui-icon-pause'} }); 
  });
  </code></pre>
  
  <p>Can anybody point out the problem?</p>