버튼에 아이콘을 지정하려면 data-icon 속성을 사용한다. jQuery Mobile에서 기본적으로 지원되는 아이콘의 크기는 18픽셀이며 한장의 그림파일에 모두 저장되어 있다.
<div
data-role="controlgroup" data-type="horizontal">
<a
href="index.html" data-role="button"
data-icon="arrow-l"
data-iconpos="notext">왼쪽</a>
<a
href="index.html" data-role="button"
data-icon="arrow-r"
data-iconpos="notext">오른쪽</a>
<a
href="index.html" data-role="button"
data-icon="arrow-u"
data-iconpos="notext">위</a>
<a
href="index.html" data-role="button"
data-icon="arrow-d"
data-iconpos="notext">아래</a>
<a
href="index.html" data-role="button"
data-icon="delete"
data-iconpos="notext">삭제</a>
<a
href="index.html" data-role="button"
data-icon="plus"
data-iconpos="notext">더하기</a>
<a
href="index.html" data-role="button"
data-icon="minus"
data-iconpos="notext">빼기</a>
<a
href="index.html" data-role="button"
data-icon="check"
data-iconpos="notext">확인</a>
<a
href="index.html" data-role="button"
data-icon="gear"
data-iconpos="notext">설정</a>
<a
href="index.html" data-role="button"
data-icon="refresh"
data-iconpos="notext">새로고침</a>
<a
href="index.html" data-role="button"
data-icon="forward"
data-iconpos="notext">앞으로</a>
<a
href="index.html" data-role="button"
data-icon="back"
data-iconpos="notext">뒤로</a>
<a
href="index.html" data-role="button"
data-icon="grid"
data-iconpos="notext">그리드</a>
<a
href="index.html" data-role="button"
data-icon="alert"
data-iconpos="notext">알림</a>
<a
href="index.html" data-role="button"
data-icon="info"
data-iconpos="notext">정보</a>
<a
href="index.html" data-role="button"
data-icon="home"
data-iconpos="notext">홈</a>
<a
href="index.html" data-role="button"
data-icon="search"
data-iconpos="notext">찾기</a>
</div>
아이콘으로 설정할 수 있는 data-icon 속성 값은 18가지이며 다음과 같다.
arrow-l
arrow-r
arrow-u
arrow-d
delete
plus
minus
check
gear
refresh
forward
back
grid
star
alert
info
home
search
