Question

Is it possible to create a jQueryUI Button with a custom icon, ie: an icon that is not part of the sprite icons that are provided with jQueryUI???

I am using the ButtonSet functionality for a group of 3 checkboxes but need a more stylised icon than what is provided out of the box...

Answer 1

Worked it out with a CSS hack.

Setup the button as per normal and give the primary icon the "Error" class defined below

.Error
{
    background-image: url( Images/Icons/16/Error.png ) !important;
}

The !important overrides the ui-icon definition for background-image.

Answer 2

I took this approach for one of my buttons and I discovered some interesting things:

I didn t need to use the "!important" override
I needed to set background-position for my button (otherwise I think the background was being displayed well outside the button)
It looks like you can also put anything you like in the jQueryUI primary icon name - it just needs something as a placeholder.

For my uses I ended up with:

Javascript:

jQuery(function() {
    jQuery( #share-button ).button({
        icons: { primary: "icons/share" }
    });

});

CSS:

#share-button > span.ui-icon {
    background-image: url(icons/share.png);
    background-position:0px 3px;}

HTML:

<button id= share-button >Share</button>