title: How do I add a custom icon to a standard jQuery UI theme?
body: <p>It is easy to use one of the icons available from the standard icon set:</p>
  
  <pre class="lang-css prettyprint-override"><code>$("#myButton").button({icons: {primary: "ui-icon-locked"}});
  </code></pre>
  
  <p>But what if I want to add one of my own icons that is not part of the framework icon set?</p>
  
  <p>I thought it would be as easy as giving it your own CSS class with a background image, but that doesn't work:</p>
  
  <pre class="lang-css prettyprint-override"><code>.fw-button-edit {
      background-image: url(edit.png);
  }
  </code></pre>
  
  <p>Any suggestions?</p>