Question

I have found documentation on using custom icons for jQuery mobile buttons and how to customize lists using existing icons but I am unable to find how to add custom icons to list views (i.e. PNGs I have created my self).

I have tried setting the data-url:

<li data-icon="action-arrow">...</li>

to the name of the png file as explained in the jQuery mobile buttons but this doesn’t work.

Answer 1

You need to add a CSS rule for your new icon:

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
}

Upadate:

You can also just make your CSS rule more specific than the jQuery Mobile rule like so:

html .ui-icon-myapp-email {
    ...
}

That’s about it, you should then be able to use this icon by referencing it like this:

<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>

Note that the icon does not display if there is not a link in the li element.

Here is a demo: http://jsfiddle.net/KYaQT/106/ (Updated Link)