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: nul         


        

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.