<p>There a core set of standard icons included in the framework. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and black colored sprites and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
<h2>Adding icons</h2>
<p>Icons can be added to buttons by adding a <code>data-icon</code> attribute on the anchor to specify the icon to display.</p>
<p>By default, icons in buttons are added to the left of the text, but the <code>data-iconpos</code> attribute specifies the icon position: <code>left</code> or <code>right</code> of the text.</p>
<p>To create an icon-only button that has an icon but no text, set the <code>data-iconpos</code> attribute to <code>notext</code> and the button plugin will hide the text and add it as a <code>title</code> attribute on the link to provide context for screen readers and devices that support tooltips. In this example, we're adding a plus (+) icon and positioning it to the right of the text with our <code>data-</code> attributes on the link.</p>
<p>To use custom icons, specify a <code>data-icon</code> value that has a unique name like <code>myapp-email</code> and the button plugin will generate a class by prefixing <code>ui-icon-</code> to the <code>data-icon</code> value and apply it to the button. You can then write a CSS rule that targets the <code>ui-icon-myapp-email</code> class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.</p>
