Tip: display a plain icon. Bonus tip: awesome icons!
The question occasionally comes-up as to how to display an icon. Just an icon. Not a button with an icon. Not a list item with an icon. JUST an icon.
Unfortunately, the JQM docs don't seem to address how to create just a plain old icon.
I suggested a solution the other day, but it wasn't quite right. Here's the right way:
<div class="ui-icon ui-icon-arrow-r></div>
You might be tempted to use a <span>, because if you examine a typical page with an HTML debugger, you will see that all the icons used in buttons, etc. are <span>s.
If you use a span, though, you won't see anything, because spans default to display:inline. They will get a width/height of 0, and thus will not display.
You could add some CSS to make your span display:block. But the easy way is just to use a <div> instead, which is display:block by default.
So, why do the icons in buttons, etc. work? They work because they are all contained inside blocks. (For example, .ui-btn-inner.)
You could build a block around your icon, like JQM does, but why? It's not needed.
-----
Here's the bonus tip:
http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/
Font Awesome is a collection nearly 200 icons. What is unique about it is that the icons are implemented as a font. They scale smoothly to any size.
Andy Matthews has adapted Font Awesome for use as jQuery Mobile icons. The included CSS places Font Awesome icons over the circle just like the default JQM icons, and just drops-in to your project. It replaces all of the original icons, as well as providing all the new Font Awesome icons.
One thing you may either love or hate is that this increases the size of JQM icons from 18x18 to 20x20.
Since it loads the Font Awesome font, you can also use Font Awesome the way it was originally intended to be used. So, you could also display any icon in any size you'd like. (Without the circle.)
More information on FontAwesome itself can be found here:
http://fortawesome.github.com/Font-Awesome/