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

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.

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.