Question

Is there an easy way to use an external icon for JQuery UI?

Say I have the following icon on a button:

  <script type="text/javascript">
    $(document).ready(function () {
        $('#aButton').button({
            icons: 
            {
                primary: "ui-icon-newicon"
            }
        });
    });
</script>

<button id="aButton">hello</button>

Is it possible to display an external jpeg or png? What is the easiest was to do this without editing the existing JQuery UI png files?

I have previously managed to achieve this by manually editing and replacing an icon that I don’t use in the ui-icons_xxxxxx_256x240.png files which works great until I upgrade to a new version of JQuery UI using nuget and the png files are replaced.

Edit:

Created this class in my Site.css (its a ASP.NET MVC3 app) and needed to add the !important flag. Didn’t have any issues with state (when the button is highlighted, hover etc).

.ui-icon-newicon
{
    background-image: url(images/delete.png) !important;
    background-position: 0 0;
}  

Answer 1

Sure, just add your own file and supply a CSS class for that specific button, something like:

#aButton.ui-icon-custom {
    background-image: url(...);
    background-position: 0 0;
}