Change the icon of a jQuery UI button with own image

Question

Currently I have the following jQuery UI button:

$('#button').button(
  {
    label: 'Test',
    icons: {primary: 'ui-icon-circle-plus', secondary: null}
  }
);

I wish to use own image for the button called 'custom.png'.

How I can achieve that?

Answer 1

search the jquery ui css file for the ui-icon-circle-plus class then copy it for your own image.

Answer 2

Define a style yourself, like this:

.ui-icon-custom { background-image: url(images/custom.png); }

Then just use it when calling .button(), like this:

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

So in your style you're just overriding that background-image, if needed change the width, height, etc.

Answer 3

Take a look at Nick Craver's comment. I tried his answer it exactly as is, but it still didn't help me. The issue (I assume) was that the ui-icon-custom class was at the end of the class list, and didn't seem to override it to original ui-icon class background image.

What I did to get it to work was add !important to the end of the icon css like so

.ui-icon-custom { background-image: url(images/custom.png) !important; }

You might have to change the height and width properties, but this worked for me.