How to modify icons in JQM 1.4.2

Question

I have been trying to change the border color of the icons in JQM here is my code

Image

<div  data-shadow="false" data-theme="c" id="transitionmap"  data-role="page">
<div data-role="header" style="background:#006699 !important;color:#fff;">
<a data-rel="back" href="#pageone"  class="ui-nodisc-icon" data-icon="location" data-iconpos="notext"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" title="Close">Go to Page One</a>
<h1><?php echo $translate->text('Ubicación Aproximada')?> </h1>
<a data-rel="back"  href="#pageone"  class="ui-nodisc-icon" data-icon="delete" data-iconpos="notext"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" title="Close">Back</a> 
</div>

</div>

Answer 1

You just need to override background-color or border-color with !important to force override.

.ui-header .ui-btn { /* or use a different selector */
  background-color: #fff !important;
  border-color: #000 !important;
}

Demo

Answer 2

This is indeed tricky. Part of the issue is the new icons in 1.42 are svgs with certain colors. I suggest opening up your app in chrome so you can inspect the inheritence of all the classes not just ui-icon. I believe you have to target a series of classes to get this looking just right.