How to use custom icons on jquery mobile?

Question

I am having trouble with my icons showing up when i deploy the app to an Android. It works when i use Ripple in Google Chrome but taking it to the android phone it is not working..

<div data-role="footer" data-position="fixed" data-theme="e">
  <div data-role="navbar" data-grid="d" data-theme="e" data-type="horizontal" data-position="fixed" id="">
    <ul>
      <li><a href="menu.html"data-role="button" class="icon-list" data-icon="custom">Menu</a></li>
      <li><a href="aboutus.html"  data-role="button" class="icon-info"data-icon="custom" >About Us</a></li> 
      <li><a  href="live.html" data-role="button" class="icon-youtube"data-icon="custom" >Watch</a></li> 
      <li><a  href="music.html"data-role="button" class="icon-heart" data-icon="custom">Video</a></li>
      <li><a  href="map.html"   data-role="button" class="icon-location2"data-icon="custom" >Location</a></li>
    </ul>
 </div>

CSS:

.ui-icon-earth {
  background: url(image/png/earth.png) 50% 50% no-repeat;
  background-size: 32px 32px;
  border-radius:0px!important;
  -moz-border-radius:0px!important;
  -webkit-border-radius:0px!important;
  -ms-border-radius:0px!important;
  -o-border-radius:0px!important;
}
.ui-icon-location2 {
  background: url(image/png/location2.png) 50% 50% no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px!important;
  margin-left:-15px!important;
}
.ui-icon-tv {
  background: url(image/png/tv.png) 50% 50% no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px !important;
  margin-left:-15px!important;
}
.ui-icon-list {
  background: url(image/png/lines.png) 50% 50% no-repeat;
  background-size: 38px 38px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px !important;
  margin-left:-15px!important;
}
.ui-icon-home {
  background: url(image/png/home.png) 50% 50% no-repeat;
  background-size: 32px 32px;
}
.ui-icon-youtube {
  background: url(image/png/earth.png) 50% 50% no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px!important;
  margin-left:-15px!important;
}
.ui-icon-calendar {
  background: url(image/png/calendar.png) 50% 50% no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px !important;
  margin-left:-15px!important;
}
.ui-icon-heart {
  background: url(image/png/youtube.png) 50% 50% no-repeat;
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px!important;
  margin-left:-15px!important;
}

HEADER:

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />    
<link rel="stylesheet" href="css/css/whhg.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/cordova.js"></script>

Answer 1

Your data-icon value should be equal to the name of the CSS class .ui-icon-[value]

  <li><a href="menu.html"data-role="button" class="icon-list" data-icon="list">Menu</a></li>

JQM will use following icon for above:

.ui-icon-list {
  background: url(image/png/lines.png) 50% 50% no-repeat;
  background-size: 38px 38px;
  width: 30px;
  height: 30px;
  box-shadow: none;
  -webkit-box-shadow: none;
  margin: -2px !important;
  margin-left:-15px!important;
}

Refer the Custom Icons section on this page http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html