jQuery Mobile には、ボタンをより見やすくするための一連のアイコンが用意されています。
ボタンにアイコンを追加するには、ui-icon クラスを使用し、アイコン position クラス（ui-btn-icon-pos）でアイコンを配置します：
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
注: 他のボタン（リストビューやフォームのボタンなど）には、data-icon 属性を使用する必要があります。 これについては後の章で説明します。
下に、jQuery Mobileが提供するいくつかのアイコンを示します：
| アイコン・クラス | 説明 | アイコン | 例 |
|---|---|---|---|
| ui-icon-arrow-l | 左矢印 | Try it | |
| ui-icon-arrow-r | 右矢印 | Try it | |
| ui-icon-info | 情報 | Try it | |
| ui-icon-delete | 削除 | Try it | |
| ui-icon-back | 戻る | Try it | |
| ui-icon-audio | スピーカ | Try it | |
| ui-icon-lock | 南京錠 | Try it | |
| ui-icon-search | 検索 | Try it | |
| ui-icon-alert | 警告 | Try it | |
| ui-icon-grid | グリッド | Try it | |
| ui-icon-home | ホーム | Try it |
jQuery Mobile ボタンアイコン全ての完全なリファレンスについては、jQuery Mobile アイコン・リファレンスを ご覧ください。
アイコン内のボタンの位置は、次の4つの値のいずれかを指定できます：top、right、bottom、left。
ui-btn-icon クラスを使用して位置を指定します：
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
Try it Yourself »リンクボタン用にアイコンの位置を指定しないと、アイコンは表示されません。
アイコンのみを表示するには、アイコン位置の値として "notext" を使用します：
デフォルトでは、すべてのアイコンの周りに灰色の円（ディスク）が表示されます。 円を削除するには、要素またはそのコンテナに "ui-nodisc-icon" クラスを追加します：
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>
Try it Yourself »デフォルトでは、すべてのアイコンは白です。 アイコンの色を黒に変更するには、要素またはそのコンテナに "ui-alt-icon" を追加します：
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>
Try it Yourself »
コンテナに "ui-nodisc-icon" クラスを追加する
コンテナに追加された "ui-nodisc-icon" クラスの例。
コンテナに "ui-alt-icon" クラスを追加する
コンテナに追加された "ui-alt-icon" クラスの例。