Custom Button within jQuery Mobile theme

Hi,

To create a button with custom icon I've been following the steps laid out at http://jquerymobile.com/test/docs/buttons/buttons-icons.html (and also in the e-book 'Master Mobile Web Apps with jQuery Mobile" by Matt Doyle) but I'm having difficulty implementing custom button icons within the jQuery Mobile theme. I was wondering if anyone else has experienced a similar issue with jQuerry Mobile theme, and if so what they did to work-around it.

What I've done so far:

1. Create a custom subtheme off of jQuery Mobile ('jqm_myapp') and configured the site to use it.
2. Created a custom 18x18 px icon ('phone.png'). I've saved this file to '/sites/all/themes/jqm_myapp/img/my-custom.png'.
3. Created a custom css file and saved it to '/sites/all/themes/jqm_myapp/styles/jqm_myapp.css'
4. Added the custom css file to jam_myapp.info

               ... 
               stylesheets[all][] = 'styles/jqm_myapp.css'
               ...
        

5. Added a custom css rule that specified the icon’s image file as the background.

              .ui-icon-myapp-phone { 
                       background-image: url('../img/phone.png'); 
               }
        

6. In the page markup I've added the data-icon attribute to my button.

        <a href="index.html" data-role="button" data-icon="myapp-phone">Call Contact</a>
     

Ideally, I should get the following button:


Instead, however, I am getting the standard 'plus' button. Ideas, suggestions?

Thanks in advance.

Chris