title: jQuery UI Dialog Button Icons
body: <p>Is it possible to add icons to the buttons on a jQuery UI Dialog?  I've tried doing it this way:</p>
  
  <pre><code>$("#DeleteDialog").dialog({
      resizable: false,
      height:150,
      modal: true,
      buttons: {
          'Delete': function() {
              /* Do stuff */
              $(this).dialog('close');
          },
          Cancel: function() {
              $(this).dialog('close');
          }
      },
      open: function() {
          $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
          $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
      }
  });
  </code></pre>
  
  <p>The selectors in the open function seem to be working fine.  If I add the following to "open":</p>
  
  <pre><code>$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');
  </code></pre>
  
  <p>then I do get a Delete button with red text.  That's not bad, but I'd really like that little trash can sprite on the Delete button as well.</p>
  
  <p>Edit:</p>
  
  <p>I made a pair of tweaks to the accepted answer:</p>
  
  <pre><code>var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
  btnDelete.prepend('&lt;span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"&gt;&lt;/span&gt;');
  btnDelete.width(btnDelete.width() + 25);
  </code></pre>
  
  <p>Adding some top margin pushes the icon down, so it looks like it's centred vertically.  Adding 25 px to the button's width keeps the button text from wrapping onto a second line.</p>