jQueryUI Button: How to change Button-Icon 'color'

Question

I have placed a html button inside a div in the following manner:

<div class="ui-state-highlight">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <!-- first span -->
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <!-- second span -->
        <span class="ui-button-text">Save</span>
    </button>
    <!-- third span -->
    <span class="ui-icon ui-icon-info"></span>
    <strong>All</strong> form fields are required.
</div>

Since the div is assigned with the class:ui-state-highlight the button's icon color has changed to blue.

Is there is a way I can revert the icon color back to: default (black) color?

And further, I need the icon in the third span to have the effect (color) of ui-state-highlight.

I'v tried applying ui-state-default, just to the first span (containing the icon), but that did not give the expected effect.

Answer 1

Re-writing the ui-state-highlight class applied for the containers (such as divs and spans) fix the problem.