How To Specify (Override) JQuery Icon Color

You can overwrite the icons with the following CSS:

.ui-icon
{
    background-image: url(icons.png);
}

You can download the icon png file in any color you like. Just change the color part in the following url:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

For example, if you want Red icons, and Cornflower Blue icons, the URLs you need are:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

RedCornflower Blue

etc.

(but don't use the URL as a CDN, be nice and save the files locally)


Use built-in icon generator for icon color #00a300 # dark green

.ui-icon
{
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;
}

SELF-ANSWER: Specified the background-image URL myself to be the file that uses the white icons. So I added a few lines to my CSS file:

.dialog #errorMessage .ui-icon
{
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png);
}

This essentially overrides the background image that the default jQuery css file wants to use for the icon, and achieved the color that I wanted. Of course this only worked because a white icon .png file was included with the theme. If I wanted some crazy color, like purple, I would have needed to create my own icon(s). Note that I needed to lengthen the URL in my own CSS file versus the URL that is specified in the jQuery CSS file, because they're located in two different places in my source.