jQuery UI Dialog Button Icons

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')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');

Answer 2

I've tried

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend(...);

and it works fine... untill you reopen the dialog. Then it prepends another icon. How can I avoid it?

Answer 3

assign height to ".ui-dialog .ui-button" like as following:

.ui-dialog .ui-button { height:36px; } .ui-icon-kl_exit { height:32px; width:32px; display:block; background-image: url('../icons/exit32.ico'); }

Answer 4

i' tried this, and it works :)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]

Answer 5

Just an update since I came across the need to do this myself.

I have multiple dialogs that both have the same close button so it's useful to talk about how one would place icons directly on the dialog you're looking to affect, just in case you would want an icon on a button in a different dialog that contains the same text.

Also the selected solution is actually missing a couple of already-defined CSS classes that would fix the positional issue.

The following code should accomplish exactly what was desired in the original question, with a little more precision. If you wanted to apply the same trash icon to all dialogs with a Delete button, changing the $('#DeleteDialog').parent() selector to $('.ui-dialog-buttonpane') would accomplish that goal:

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

Answer 6

Or if you don't want to affect any other dialogs,

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

Answer 7

Hi all,

This version works without having to worry about the text in the buttons

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}