jQuery UI Dialog Button Icons

Jquery Problem Overview

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.

Jquery Solutions

Solution 1 - Jquery

i' tried this, and it works :)

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

Solution 2 - Jquery

Natively supported since jQuery UI 1.10

Starting from jQuery UI version 1.10.0, it is possible to cleanly specify button icons without resorting to open event handlers. The syntax is:

buttons: [
    {
        text: "OK",
        icons: { primary: "ui-icon-check" }
    },
    {
        text: "Cancel",
        icons: { primary: "ui-icon-closethick" }
    }
]

It is also possible to specify a secondary icon.

See it in action.

Solution 3 - Jquery

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>');

Solution 4 - Jquery

also you can add id or other attr to button, like this:

buttons:[
			{
				text: "Close",
				id: "closebtn",
				click: function() { $(this).dialog("close"); }
			}
		],
open: function() {
			$("#closebtn").button({ icons: { primary: "ui-icon-close" } });
		}

Solution 5 - Jquery

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' }
    });
}

Solution 6 - Jquery

Here is what I use. Assign an ID to the button of interest during the initial dialog definition:

    buttons:
    [
        {
            id: "canxButton",
            text: "Cancel",
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () { ...

Then you can change text/icon like this:

$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });

Solution 7 - Jquery

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');
}

Solution 8 - Jquery

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>');

Solution 9 - Jquery

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' }
    });
}

Solution 10 - Jquery

I ran in the same issue. It seems jquery stores the text in an attribute called "text" in the button itself, and not as text inside the button.

I solved it like this:

	$dialog.dialog({
		resizable:false,
		draggable:false,
		modal:true,
		open:function (event, ui) {
			$(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
			//or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
			$(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
		},
		buttons:[
			{
				text:"OK",
				click:function () {

				},
				"class":"add"
			},
			{
				text:"Cancel",
				click:function () {

				},
				"class":"cancel"
			}
		]
	});

Solution 11 - Jquery

How about a class-based approach?

In your _layout.cshtml file put something like the following:

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

Then, in the file where you are creating the dialog, do something like this:

$("#doStuff-dialog").dialog({
    title: "Do Some Stuff",
    modal: true,
    buttons: [
        {
            text: "Yes",
            class: "my-button-submit",
            click: function () {
                $(this).dialog("close");
            }
        },
        {
            text: "No",
            class: "my-button-cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ],
    open: function () {
        stylizeButtons($("#doStuff-dialog").parent());
    }
});

Then you never have to rely on searching for text, and it requires a minimal amount of code in your dialog. I use this throughout my applications to apply jquery UI styling/icons to buttons just by giving them a class.

Solution 12 - Jquery

According to Dialog > buttons option documentation you can pass an object or an array of options; the latter allows you to customize the buttons:

> ##buttons > Type: Object or Array
> Default: [] > > Multiple types supported: > > - Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked. > - Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. In > addition, a key of icons can be used to control button's icons > option, and a key of showText can be used to control button's text > option.

$(function() {
  var buttons = [];
  buttons.push({
    text: "Yes",
    // icon options
    icons: { primary: "ui-icon-check" },
    // attributes
    "class": "hawt-button",
    title: "Aye!"
  });
  buttons.push({
    text: "Yes to All",
    icons: { secondary: "ui-icon-check" }
  });
  buttons.push({
    text: "Please",
    icons: { primary: "ui-icon-notice" },
    // text options
    showText: false
  });
  buttons.push({
    text: "Cancel",
    icons: { secondary: "ui-icon-close" },
    // properties
    disabled: true
  });
  $("#dialog").dialog({
    width: "auto",
    buttons: buttons
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

.ui-button.hawt-button {
  color: hotpink;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>

Solution 13 - Jquery

On open method add custom icon like this:

$dialog.dialog({
    resizable:false,
    draggable:false,
    modal:true,
    open:function (event, ui) {
        $(this).parents('.ui-dialog').find('.cancel.ui-button')
            .prepend('<i class="far fa-window-close"></i><span>&nbsp;&nbsp; 
                   </span>');
    },

"far fa-window-close" is bootstrap awesome icon

Content Type	Original Author	Original Content on Stackoverflow
Question	Cory Grimster	View Question on Stackoverflow
Solution 1 - Jquery	David K	View Answer on Stackoverflow
Solution 2 - Jquery	Jon	View Answer on Stackoverflow
Solution 3 - Jquery	enduro	View Answer on Stackoverflow
Solution 4 - Jquery	d1Mm	View Answer on Stackoverflow
Solution 5 - Jquery	Fabrizio	View Answer on Stackoverflow
Solution 6 - Jquery	hoyt1969	View Answer on Stackoverflow
Solution 7 - Jquery	jkl	View Answer on Stackoverflow
Solution 8 - Jquery	lsuarez	View Answer on Stackoverflow
Solution 9 - Jquery	Petah	View Answer on Stackoverflow
Solution 10 - Jquery	Jareish	View Answer on Stackoverflow
Solution 11 - Jquery	Pandincus	View Answer on Stackoverflow
Solution 12 - Jquery	Salman A	View Answer on Stackoverflow
Solution 13 - Jquery	Zhelyo Hristov	View Answer on Stackoverflow