title: jQueryUI Button: How to change Button-Icon 'color'
body: <p>I have placed a <em>html button</em> inside a <em>div</em> in the following manner:</p>
  
  <pre><code>&lt;div class="ui-state-highlight"&gt;
      &lt;button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary"&gt;
          &lt;!-- first span --&gt;
          &lt;span class="ui-button-icon-primary ui-icon ui-icon-disk"&gt;&lt;/span&gt;
          &lt;!-- second span --&gt;
          &lt;span class="ui-button-text"&gt;Save&lt;/span&gt;
      &lt;/button&gt;
      &lt;!-- third span --&gt;
      &lt;span class="ui-icon ui-icon-info"&gt;&lt;/span&gt;
      &lt;strong&gt;All&lt;/strong&gt; form fields are required.
  &lt;/div&gt;
  </code></pre>
  
  <p>Since the <em>div</em> is assigned with the class:<code>ui-state-highlight</code> the <em>button's</em> icon color has changed to <em>blue</em>.</p>
  
  <p>Is there is a way I can revert the icon color back to: <em>default (black)</em> color?</p>
  
  <p>And <strong>further</strong>, I need the icon in the <em>third span</em> to have the effect (color) of <code>ui-state-highlight</code>. </p>
  
  <p>I'v tried applying <code>ui-state-default</code>, just to the <em>first span</em> (containing the icon), but that did not give the expected effect.    </p>