IE8 icons missing in custom theme created with ThemeRoller

IE8 icons missing in custom theme created with ThemeRoller

I am creating a custom theme with ThemeRoller in Internet Explorer 9.
 
When I apply the custom theme to my site, the icons are missing from all the buttons on all the pages in Internet Explorer 8, but not in other browsers such as Internet Explorer 9, Safari or Android ICS. The icons are displayed as white squares.
 
Steps to reproduce the problem:
 
1. Start ThemeRoller.
 
2. Click inside the Icon DISC COLOR or DISC OPACITY settings on the Global tab (you don't need to actually change the settings).
 
3.  Download the custom theme.
 
Take a look at the .css file. The global-icon-color changed from the default #666666 to #FFFFFF in the following section:
 
.ui-icon,
.ui-icon-searchfield:after {
 background: #FFFFFF /*{global-icon-color}*/;

 
If you replace #FFFFFF with #666666 in the custom theme .css file, the icons are displayed correctly in IE8.
 
See also the following post for more information: