Question

Is it possible to add icons to the buttons on a jQuery UI Dialog? I’ve tried doing it this way:

$("#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');
    }
});

The selectors in the open function seem to be working fine. If I add the following to “open”:

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');

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.

Edit:

I made a pair of tweaks to the accepted answer:

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

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.

Answer 1

Try this line to add the trash icon to the delete button. The sprite has to be in a separate element.

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

In order to prevent the icon from appearing on the top of the button:

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');