Question

How can I set a jquery ui icon as a background image per a css container?

Something like:

.MyClass {
  background: url("ui-icon-plus");
}

// Existing div...want to add icon to left-align
<div class="MyClass">
   //Other stuff in there that expands and collapses
</div>

UPDATE

How can I get the following text to appear to the right of the icon?

<div class="MyClass">Whatever</div> <!-- no workee--> 
<div class="MyClass"><span class="MC">Whatever</span></div> <!-- works --> 

 .MyClass {
      width: 16px; height: 16px; background-image: url("../../Content/themes/base/images/ui-icons_222222_256x240.png")/*{iconsContent}*/;
      background-position : -16px -128px; 
}
.MC {
   padding-left: 20px;   
}

Answer 1

You have to apply the corresponding CSS class:

<div class="ui-icon ui-icon-plus"></div>

Assuming that you have the correct jQuery UI .css file with those classes defined. If you look at the jQuery .css file you’ll see that it is using background-position to find the icon in the CSS sprite.

Look at the styles of the icons on Themeroller for examples.