#Ionic

Tutorial Ionic Part 11 : Icon Pada Ionic

By Muzanni
1 May 2017
Ionic

Tutorial Ionic Part 11 : Icon Pada Ionic -oke, kita lanjutkan pembahasan tutorial ini, sesuai judulnya pada artikel kali ini akan kita bahas mengenai icon pada ionic.

Untuk membuat tampilan yang lebih menarik kita memerlukan icon untuk mendukung tampilan yang kita desain. ada lebih dari 700 icon yang disediakan oleh ionic, kita hanya tinggal menggunakan nya saja, itu lah salah satu kelebihan kenapa kita menggunakan framework ionic ini.

Icon Pada Ionic

Hampir semua icon yang kita butuhkan untuk desain aplikasi sudah disiapkan oleh ionic. selain kita menggunakan icon yang sudah disiapkan oleh ionic, kita juga bisa menggunakan icon yang kita desain sendiri. anda dapat melihat keseluruhan icon ionic disini (ionicons).

ok, berikut contoh penggunaan icon dalam aplikasi ionic.

Icon Pada Ionic

itu salah satu contoh penggunaan icon pada ionic.

Untuk menggunakan icon ini, ionic telah menyediakan class untuk icon tersebut. sehingga ini sangat membantu kita dalam membuat aplikais. oke, berikut beberapa icon yang sudah desediakan oleh ionic.

Icon	Hasil
<i class=”icon ion-ionic”></i>
<i class=”icon ion-arrow-up-a”></i>
<i class=”icon ion-arrow-right-a”></i>
<i class=”icon ion-arrow-down-a”></i>
<i class=”icon ion-arrow-left-a”></i>
<i class=”icon ion-arrow-up-b”></i>
<i class=”icon ion-arrow-right-b”></i>
<i class=”icon ion-arrow-down-b”></i>
<i class=”icon ion-arrow-left-b”></i>
<i class=”icon ion-arrow-up-c”></i>
<i class=”icon ion-arrow-right-c”></i>
<i class=”icon ion-arrow-down-c”></i>
<i class=”icon ion-arrow-left-c”></i>
<i class=”icon ion-arrow-return-right”></i>
<i class=”icon ion-arrow-return-left”></i>
<i class=”icon ion-arrow-swap”></i>
<i class=”icon ion-arrow-shrink”></i>
<i class=”icon ion-arrow-expand”></i>
<i class=”icon ion-arrow-move”></i>
<i class=”icon ion-arrow-resize”></i>
<i class=”icon ion-chevron-up”></i>
<i class=”icon ion-chevron-right”></i>
<i class=”icon ion-chevron-down”></i>
<i class=”icon ion-chevron-left”></i>
<i class=”icon ion-navicon-round”></i>
<i class=”icon ion-navicon”></i>
<i class=”icon ion-drag”></i>
<i class=”icon ion-log-in”></i>
<i class=”icon ion-log-out”></i>
<i class=”icon ion-checkmark-round”></i>
<i class=”icon ion-checkmark”></i>
<i class=”icon ion-checkmark-circled”></i>
<i class=”icon ion-close-round”></i>
<i class=”icon ion-close”></i>
<i class=”icon ion-close-circled”></i>
<i class=”icon ion-plus-round”></i>
<i class=”icon ion-plus”></i>
<i class=”icon ion-plus-circled”></i>
<i class=”icon ion-minus-round”></i>
<i class=”icon ion-minus”></i>
<i class=”icon ion-minus-circled”></i>
<i class=”icon ion-information”></i>
<i class=”icon ion-informaticon ion-circled”></i>
<i class=”icon ion-help”></i>
<i class=”icon ion-help-circled”></i>
<i class=”icon ion-backspace-outline”></i>
<i class=”icon ion-backspace”></i>
<i class=”icon ion-help-buoy”></i>
<i class=”icon ion-asterisk”></i>
<i class=”icon ion-alert”></i>
<i class=”icon ion-alert-circled”></i>
<i class=”icon ion-refresh”></i>
<i class=”icon ion-loop”></i>
<i class=”icon ion-shuffle”></i>
<i class=”icon ion-home”></i>
<i class=”icon ion-search”></i>
<i class=”icon ion-flag”></i>
<i class=”icon ion-star”></i>
<i class=”icon ion-heart”></i>
<i class=”icon ion-heart-broken”></i>
<i class=”icon ion-gear-a”></i>
<i class=”icon ion-gear-b”></i>
<i class=”icon ion-toggle-filled”></i>
<i class=”icon ion-toggle”></i>
<i class=”icon ion-settings”></i>
<i class=”icon ion-wrench”></i>
<i class=”icon ion-hammer”></i>
<i class=”icon ion-edit”></i>
<i class=”icon ion-trash-a”></i>
<i class=”icon ion-trash-b”></i>
<i class=”icon ion-document”></i>
<i class=”icon ion-document-text”></i>
<i class=”icon ion-clipboard”></i>
<i class=”icon ion-scissors”></i>
<i class=”icon ion-funnel”></i>
<i class=”icon ion-bookmark”></i>
<i class=”icon ion-email”></i>
<i class=”icon ion-email-unread”></i>
<i class=”icon ion-folder”></i>
<i class=”icon ion-filing”></i>
<i class=”icon ion-archive”></i>
<i class=”icon ion-reply”></i>
<i class=”icon ion-reply-all”></i>
<i class=”icon ion-forward”></i>
<i class=”icon ion-share”></i>
<i class=”icon ion-paper-airplane”></i>
<i class=”icon ion-link”></i>
<i class=”icon ion-paperclip”></i>
<i class=”icon ion-compose”></i>
<i class=”icon ion-briefcase”></i>
<i class=”icon ion-medkit”></i>
<i class=”icon ion-at”></i>
<i class=”icon ion-pound”></i>
<i class=”icon ion-quote”></i>
<i class=”icon ion-cloud”></i>
<i class=”icon ion-upload”></i>
<i class=”icon ion-more”></i>
<i class=”icon ion-grid”></i>
<i class=”icon ion-calendar”></i>
<i class=”icon ion-clock”></i>
<i class=”icon ion-compass”></i>
<i class=”icon ion-pinpoint”></i>
<i class=”icon ion-pin”></i>
<i class=”icon ion-navigate”></i>
<i class=”icon ion-location”></i>
<i class=”icon ion-map”></i>
<i class=”icon ion-lock-combination”></i>
<i class=”icon ion-locked”></i>
<i class=”icon ion-unlocked”></i>
<i class=”icon ion-key”></i>
<i class=”icon ion-arrow-graph-up-right”></i>
<i class=”icon ion-arrow-graph-down-right”></i>
<i class=”icon ion-arrow-graph-up-left”></i>
<i class=”icon ion-arrow-graph-down-left”></i>
<i class=”icon ion-stats-bars”></i>
<i class=”icon ion-connecticon ion-bars”></i>
<i class=”icon ion-pie-graph”></i>
<i class=”icon ion-chatbubble”></i>
<i class=”icon ion-chatbubble-working”></i>
<i class=”icon ion-chatbubbles”></i>
<i class=”icon ion-chatbox”></i>
<i class=”icon ion-chatbox-working”></i>
<i class=”icon ion-chatboxes”></i>
<i class=”icon ion-person”></i>
<i class=”icon ion-person-add”></i>
<i class=”icon ion-person-stalker”></i>
<i class=”icon ion-woman”></i>
<i class=”icon ion-man”></i>
<i class=”icon ion-female”></i>
<i class=”icon ion-male”></i>
<i class=”icon ion-transgender”></i>
<i class=”icon ion-fork”></i>
<i class=”icon ion-knife”></i>
<i class=”icon ion-spoon”></i>
<i class=”icon ion-soup-can-outline”></i>
<i class=”icon ion-soup-can”></i>
<i class=”icon ion-beer”></i>
<i class=”icon ion-wineglass”></i>
<i class=”icon ion-coffee”></i>
<i class=”icon ion-icecream”></i>
<i class=”icon ion-pizza”></i>
<i class=”icon ion-power”></i>
<i class=”icon ion-mouse”></i>
<i class=”icon ion-battery-full”></i>
<i class=”icon ion-battery-half”></i>
<i class=”icon ion-battery-low”></i>
<i class=”icon ion-battery-empty”></i>
<i class=”icon ion-battery-charging”></i>
<i class=”icon ion-wifi”></i>
<i class=”icon ion-bluetooth”></i>
<i class=”icon ion-calculator”></i>
<i class=”icon ion-camera”></i>
<i class=”icon ion-eye”></i>
<i class=”icon ion-eye-disabled”></i>
<i class=”icon ion-flash”></i>
<i class=”icon ion-flash-off”></i>
<i class=”icon ion-qr-scanner”></i>
<i class=”icon ion-image”></i>
<i class=”icon ion-images”></i>
<i class=”icon ion-wand”></i>
<i class=”icon ion-contrast”></i>
<i class=”icon ion-aperture”></i>
<i class=”icon ion-crop”></i>
<i class=”icon ion-easel”></i>
<i class=”icon ion-paintbrush”></i>
<i class=”icon ion-paintbucket”></i>
<i class=”icon ion-monitor”></i>
<i class=”icon ion-laptop”></i>
<i class=”icon ion-ipad”></i>
<i class=”icon ion-iphone”></i>
<i class=”icon ion-ipod”></i>
<i class=”icon ion-printer”></i>
<i class=”icon ion-usb”></i>
<i class=”icon ion-outlet”></i>
<i class=”icon ion-bug”></i>
<i class=”icon ion-code”></i>
<i class=”icon ion-code-working”></i>
<i class=”icon ion-code-download”></i>
<i class=”icon ion-fork-repo”></i>
<i class=”icon ion-network”></i>
<i class=”icon ion-pull-request”></i>
<i class=”icon ion-merge”></i>
<i class=”icon ion-xbox”></i>
<i class=”icon ion-playstation”></i>
<i class=”icon ion-steam”></i>
<i class=”icon ion-closed-captioning”></i>
<i class=”icon ion-videocamera”></i>
<i class=”icon ion-film-marker”></i>
<i class=”icon ion-disc”></i>
<i class=”icon ion-headphone”></i>
<i class=”icon ion-music-note”></i>
<i class=”icon ion-radio-waves”></i>
<i class=”icon ion-speakerphone”></i>
<i class=”icon ion-mic-a”></i>
<i class=”icon ion-mic-b”></i>
<i class=”icon ion-mic-c”></i>
<i class=”icon ion-volume-high”></i>
<i class=”icon ion-volume-medium”></i>
<i class=”icon ion-volume-low”></i>
<i class=”icon ion-volume-mute”></i>
<i class=”icon ion-levels”></i>
<i class=”icon ion-play”></i>
<i class=”icon ion-pause”></i>
<i class=”icon ion-stop”></i>
<i class=”icon ion-record”></i>
<i class=”icon ion-skip-forward”></i>
<i class=”icon ion-skip-backward”></i>
<i class=”icon ion-eject”></i>
<i class=”icon ion-bag”></i>
<i class=”icon ion-card”></i>
<i class=”icon ion-cash”></i>
<i class=”icon ion-pricetag”></i>
<i class=”icon ion-pricetags”></i>
<i class=”icon ion-thumbsup”></i>
<i class=”icon ion-thumbsdown”></i>
<i class=”icon ion-happy-outline”></i>
<i class=”icon ion-happy”></i>
<i class=”icon ion-sad-outline”></i>
<i class=”icon ion-sad”></i>
<i class=”icon ion-bowtie”></i>
<i class=”icon ion-tshirt-outline”></i>
<i class=”icon ion-tshirt”></i>
<i class=”icon ion-trophy”></i>
<i class=”icon ion-podium”></i>
<i class=”icon ion-ribbon-a”></i>
<i class=”icon ion-ribbon-b”></i>
<i class=”icon ion-university”></i>
<i class=”icon ion-magnet”></i>
<i class=”icon ion-beaker”></i>
<i class=”icon ion-erlenmeyer-flask”></i>
<i class=”icon ion-egg”></i>
<i class=”icon ion-earth”></i>
<i class=”icon ion-planet”></i>
<i class=”icon ion-lightbulb”></i>
<i class=”icon ion-cube”></i>
<i class=”icon ion-leaf”></i>
<i class=”icon ion-waterdrop”></i>
<i class=”icon ion-flame”></i>
<i class=”icon ion-fireball”></i>
<i class=”icon ion-bonfire”></i>
<i class=”icon ion-umbrella”></i>
<i class=”icon ion-nuclear”></i>
<i class=”icon ion-no-smoking”></i>
<i class=”icon ion-thermometer”></i>
<i class=”icon ion-speedometer”></i>
<i class=”icon ion-model-s”></i>
<i class=”icon ion-plane”></i>
<i class=”icon ion-jet”></i>
<i class=”icon ion-load-a”></i>
<i class=”icon ion-load-b”></i>
<i class=”icon ion-load-c”></i>
<i class=”icon ion-load-d”></i>

Icon iOS Pada Ionic

Icon	Hasil
<i class=”icon ion-ios-ionic-outline”></i>
<i class=”icon ion-ios-arrow-back”></i>
<i class=”icon ion-ios-arrow-forward”></i>
<i class=”icon ion-ios-arrow-up”></i>
<i class=”icon ion-ios-arrow-right”></i>
<i class=”icon ion-ios-arrow-down”></i>
<i class=”icon ion-ios-arrow-left”></i>
<i class=”icon ion-ios-arrow-thin-up”></i>
<i class=”icon ion-ios-arrow-thin-right”></i>
<i class=”icon ion-ios-arrow-thin-down”></i>
<i class=”icon ion-ios-arrow-thin-left”></i>
<i class=”icon ion-ios-circle-filled”></i>
<i class=”icon ion-ios-circle-outline”></i>
<i class=”icon ion-ios-checkmark-empty”></i>
<i class=”icon ion-ios-checkmark-outline”></i>
<i class=”icon ion-ios-checkmark”></i>
<i class=”icon ion-ios-plus-empty”></i>
<i class=”icon ion-ios-plus-outline”></i>
<i class=”icon ion-ios-plus”></i>
<i class=”icon ion-ios-close-empty”></i>
<i class=”icon ion-ios-close-outline”></i>
<i class=”icon ion-ios-close”></i>
<i class=”icon ion-ios-minus-empty”></i>
<i class=”icon ion-ios-minus-outline”></i>
<i class=”icon ion-ios-minus”></i>
<i class=”icon ion-ios-informaticon ion-empty”></i>
<i class=”icon ion-ios-informaticon ion-outline”></i>
<i class=”icon ion-ios-information”></i>
<i class=”icon ion-ios-help-empty”></i>
<i class=”icon ion-ios-help-outline”></i>
<i class=”icon ion-ios-help”></i>
<i class=”icon ion-ios-search”></i>
<i class=”icon ion-ios-search-strong”></i>
<i class=”icon ion-ios-star”></i>
<i class=”icon ion-ios-star-half”></i>
<i class=”icon ion-ios-star-outline”></i>
<i class=”icon ion-ios-heart”></i>
<i class=”icon ion-ios-heart-outline”></i>
<i class=”icon ion-ios-more”></i>
<i class=”icon ion-ios-more-outline”></i>
<i class=”icon ion-ios-home”></i>
<i class=”icon ion-ios-home-outline”></i>
<i class=”icon ion-ios-cloud”></i>
<i class=”icon ion-ios-cloud-outline”></i>
<i class=”icon ion-ios-cloud-upload”></i>
<i class=”icon ion-ios-cloud-upload-outline”></i>
<i class=”icon ion-ios-cloud-download”></i>
<i class=”icon ion-ios-cloud-download-outline”></i>
<i class=”icon ion-ios-upload”></i>
<i class=”icon ion-ios-upload-outline”></i>
<i class=”icon ion-ios-download”></i>
<i class=”icon ion-ios-download-outline”></i>
<i class=”icon ion-ios-refresh”></i>
<i class=”icon ion-ios-refresh-outline”></i>
<i class=”icon ion-ios-refresh-empty”></i>
<i class=”icon ion-ios-reload”></i>
<i class=”icon ion-ios-loop-strong”></i>
<i class=”icon ion-ios-loop”></i>
<i class=”icon ion-ios-bookmarks”></i>
<i class=”icon ion-ios-bookmarks-outline”></i>
<i class=”icon ion-ios-book”></i>
<i class=”icon ion-ios-book-outline”></i>
<i class=”icon ion-ios-flag”></i>
<i class=”icon ion-ios-flag-outline”></i>
<i class=”icon ion-ios-glasses”></i>
<i class=”icon ion-ios-glasses-outline”></i>
<i class=”icon ion-ios-browsers”></i>
<i class=”icon ion-ios-browsers-outline”></i>
<i class=”icon ion-ios-at”></i>
<i class=”icon ion-ios-at-outline”></i>
<i class=”icon ion-ios-pricetag”></i>
<i class=”icon ion-ios-pricetag-outline”></i>
<i class=”icon ion-ios-pricetags”></i>
<i class=”icon ion-ios-pricetags-outline”></i>
<i class=”icon ion-ios-cart”></i>
<i class=”icon ion-ios-cart-outline”></i>
<i class=”icon ion-ios-chatboxes”></i>
<i class=”icon ion-ios-chatboxes-outline”></i>
<i class=”icon ion-ios-chatbubble”></i>
<i class=”icon ion-ios-chatbubble-outline”></i>
<i class=”icon ion-ios-cog”></i>
<i class=”icon ion-ios-cog-outline”></i>
<i class=”icon ion-ios-gear”></i>
<i class=”icon ion-ios-gear-outline”></i>
<i class=”icon ion-ios-settings”></i>
<i class=”icon ion-ios-settings-strong”></i>
<i class=”icon ion-ios-toggle”></i>
<i class=”icon ion-ios-toggle-outline”></i>
<i class=”icon ion-ios-analytics”></i>
<i class=”icon ion-ios-analytics-outline”></i>
<i class=”icon ion-ios-pie”></i>
<i class=”icon ion-ios-pie-outline”></i>
<i class=”icon ion-ios-pulse”></i>
<i class=”icon ion-ios-pulse-strong”></i>
<i class=”icon ion-ios-filing”></i>
<i class=”icon ion-ios-filing-outline”></i>
<i class=”icon ion-ios-box”></i>
<i class=”icon ion-ios-box-outline”></i>
<i class=”icon ion-ios-compose”></i>
<i class=”icon ion-ios-compose-outline”></i>
<i class=”icon ion-ios-trash”></i>
<i class=”icon ion-ios-trash-outline”></i>
<i class=”icon ion-ios-copy”></i>
<i class=”icon ion-ios-copy-outline”></i>
<i class=”icon ion-ios-email”></i>
<i class=”icon ion-ios-email-outline”></i>
<i class=”icon ion-ios-undo”></i>
<i class=”icon ion-ios-undo-outline”></i>
<i class=”icon ion-ios-redo”></i>
<i class=”icon ion-ios-redo-outline”></i>
<i class=”icon ion-ios-paperplane”></i>
<i class=”icon ion-ios-paperplane-outline”></i>
<i class=”icon ion-ios-folder”></i>
<i class=”icon ion-ios-folder-outline”></i>
<i class=”icon ion-ios-paper”></i>
<i class=”icon ion-ios-paper-outline”></i>
<i class=”icon ion-ios-list”></i>
<i class=”icon ion-ios-list-outline”></i>
<i class=”icon ion-ios-world”></i>
<i class=”icon ion-ios-world-outline”></i>
<i class=”icon ion-ios-alarm”></i>
<i class=”icon ion-ios-alarm-outline”></i>
<i class=”icon ion-ios-speedometer”></i>
<i class=”icon ion-ios-speedometer-outline”></i>
<i class=”icon ion-ios-stopwatch”></i>
<i class=”icon ion-ios-stopwatch-outline”></i>
<i class=”icon ion-ios-timer”></i>
<i class=”icon ion-ios-timer-outline”></i>
<i class=”icon ion-ios-clock”></i>
<i class=”icon ion-ios-clock-outline”></i>
<i class=”icon ion-ios-time”></i>
<i class=”icon ion-ios-time-outline”></i>
<i class=”icon ion-ios-calendar”></i>
<i class=”icon ion-ios-calendar-outline”></i>
<i class=”icon ion-ios-photos”></i>
<i class=”icon ion-ios-photos-outline”></i>
<i class=”icon ion-ios-albums”></i>
<i class=”icon ion-ios-albums-outline”></i>
<i class=”icon ion-ios-camera”></i>
<i class=”icon ion-ios-camera-outline”></i>
<i class=”icon ion-ios-reverse-camera”></i>
<i class=”icon ion-ios-reverse-camera-outline”></i>
<i class=”icon ion-ios-eye”></i>
<i class=”icon ion-ios-eye-outline”></i>
<i class=”icon ion-ios-bolt”></i>
<i class=”icon ion-ios-bolt-outline”></i>
<i class=”icon ion-ios-color-wand”></i>
<i class=”icon ion-ios-color-wand-outline”></i>
<i class=”icon ion-ios-color-filter”></i>
<i class=”icon ion-ios-color-filter-outline”></i>
<i class=”icon ion-ios-grid-view”></i>
<i class=”icon ion-ios-grid-view-outline”></i>
<i class=”icon ion-ios-crop-strong”></i>
<i class=”icon ion-ios-crop”></i>
<i class=”icon ion-ios-barcode”></i>
<i class=”icon ion-ios-barcode-outline”></i>
<i class=”icon ion-ios-briefcase”></i>
<i class=”icon ion-ios-briefcase-outline”></i>
<i class=”icon ion-ios-medkit”></i>
<i class=”icon ion-ios-medkit-outline”></i>
<i class=”icon ion-ios-medical”></i>
<i class=”icon ion-ios-medical-outline”></i>
<i class=”icon ion-ios-infinite”></i>
<i class=”icon ion-ios-infinite-outline”></i>
<i class=”icon ion-ios-calculator”></i>
<i class=”icon ion-ios-calculator-outline”></i>
<i class=”icon ion-ios-keypad”></i>
<i class=”icon ion-ios-keypad-outline”></i>
<i class=”icon ion-ios-telephone”></i>
<i class=”icon ion-ios-telephone-outline”></i>
<i class=”icon ion-ios-drag”></i>
<i class=”icon ion-ios-location”></i>
<i class=”icon ion-ios-locaticon ion-outline”></i>
<i class=”icon ion-ios-navigate”></i>
<i class=”icon ion-ios-navigate-outline”></i>
<i class=”icon ion-ios-locked”></i>
<i class=”icon ion-ios-locked-outline”></i>
<i class=”icon ion-ios-unlocked”></i>
<i class=”icon ion-ios-unlocked-outline”></i>
<i class=”icon ion-ios-monitor”></i>
<i class=”icon ion-ios-monitor-outline”></i>
<i class=”icon ion-ios-printer”></i>
<i class=”icon ion-ios-printer-outline”></i>
<i class=”icon ion-ios-game-controller-a”></i>
<i class=”icon ion-ios-game-controller-a-outline”></i>
<i class=”icon ion-ios-game-controller-b”></i>
<i class=”icon ion-ios-game-controller-b-outline”></i>
<i class=”icon ion-ios-americanfootball”></i>
<i class=”icon ion-ios-americanfootball-outline”></i>
<i class=”icon ion-ios-baseball”></i>
<i class=”icon ion-ios-baseball-outline”></i>
<i class=”icon ion-ios-basketball”></i>
<i class=”icon ion-ios-basketball-outline”></i>gt;
<i class=”icon ion-ios-tennisball”></i>
<i class=”icon ion-ios-tennisball-outline”></i>
<i class=”icon ion-ios-football”></i>
<i class=”icon ion-ios-football-outline”></i>
<i class=”icon ion-ios-body”></i>
<i class=”icon ion-ios-body-outline”></i>
<i class=”icon ion-ios-person”></i>
<i class=”icon ion-ios-person-outline”></i>
<i class=”icon ion-ios-personadd”></i>
<i class=”icon ion-ios-personadd-outline”></i>
<i class=”icon ion-ios-people”></i>
<i class=”icon ion-ios-people-outline”></i>
<i class=”icon ion-ios-musical-notes”></i>
<i class=”icon ion-ios-musical-note”></i>
<i class=”icon ion-ios-bell”></i>
<i class=”icon ion-ios-bell-outline”></i>
<i class=”icon ion-ios-mic”></i>
<i class=”icon ion-ios-mic-outline”></i>
<i class=”icon ion-ios-mic-off”></i>
<i class=”icon ion-ios-volume-high”></i>
<i class=”icon ion-ios-volume-low”></i>
<i class=”icon ion-ios-play”></i>
<i class=”icon ion-ios-play-outline”></i>
<i class=”icon ion-ios-pause”></i>
<i class=”icon ion-ios-pause-outline”></i>
<i class=”icon ion-ios-recording”></i>
<i class=”icon ion-ios-recording-outline”></i>
<i class=”icon ion-ios-fastforward”></i>
<i class=”icon ion-ios-fastforward-outline”></i>
<i class=”icon ion-ios-rewind”></i>
<i class=”icon ion-ios-rewind-outline”></i>
<i class=”icon ion-ios-skipbackward”></i>
<i class=”icon ion-ios-skipbackward-outline”></i>
<i class=”icon ion-ios-skipforward”></i>
<i class=”icon ion-ios-skipforward-outline”></i>
<i class=”icon ion-ios-shuffle-strong”></i>
<i class=”icon ion-ios-shuffle”></i>
<i class=”icon ion-ios-videocam”></i>
<i class=”icon ion-ios-videocam-outline”></i>
<i class=”icon ion-ios-film”></i>
<i class=”icon ion-ios-film-outline”></i>
<i class=”icon ion-ios-flask”></i>
<i class=”icon ion-ios-flask-outline”></i>
<i class=”icon ion-ios-lightbulb”></i>
<i class=”icon ion-ios-lightbulb-outline”></i>
<i class=”icon ion-ios-wineglass”></i>
<i class=”icon ion-ios-wineglass-outline”></i>
<i class=”icon ion-ios-pint”></i>
<i class=”icon ion-ios-pint-outline”></i>
<i class=”icon ion-ios-nutrition”></i>
<i class=”icon ion-ios-nutriticon ion-outline”></i>
<i class=”icon ion-ios-flower”></i>
<i class=”icon ion-ios-flower-outline”></i>
<i class=”icon ion-ios-rose”></i>
<i class=”icon ion-ios-rose-outline”></i>
<i class=”icon ion-ios-paw”></i>
<i class=”icon ion-ios-paw-outline”></i>
<i class=”icon ion-ios-flame”></i>
<i class=”icon ion-ios-flame-outline”></i>
<i class=”icon ion-ios-sunny”></i>
<i class=”icon ion-ios-sunny-outline”></i>
<i class=”icon ion-ios-partlysunny”></i>
<i class=”icon ion-ios-partlysunny-outline”></i>
<i class=”icon ion-ios-cloudy”></i>
<i class=”icon ion-ios-cloudy-outline”></i>
<i class=”icon ion-ios-rainy”></i>
<i class=”icon ion-ios-rainy-outline”></i>
<i class=”icon ion-ios-thunderstorm”></i>
<i class=”icon ion-ios-thunderstorm-outline”></i>
<i class=”icon ion-ios-snowy”></i>
<i class=”icon ion-ios-moon”></i>
<i class=”icon ion-ios-moon-outline”></i>
<i class=”icon ion-ios-cloudy-night”></i>
<i class=”icon ion-ios-cloudy-night-outline”></i>

Icon Android Pada Ionic

Icon	Hasil
<i class=”icon ion-android-arrow-up”></i>
<i class=”icon ion-android-arrow-forward”></i>
<i class=”icon ion-android-arrow-down”></i>
<i class=”icon ion-android-arrow-back”></i>
<i class=”icon ion-android-arrow-dropup”></i>
<i class=”icon ion-android-arrow-dropup-circle”></i>
<i class=”icon ion-android-arrow-dropright”></i>
<i class=”icon ion-android-arrow-dropright-circle”></i>
<i class=”icon ion-android-arrow-dropdown”></i>
<i class=”icon ion-android-arrow-dropdown-circle”></i>
<i class=”icon ion-android-arrow-dropleft”></i>
<i class=”icon ion-android-arrow-dropleft-circle”></i>
<i class=”icon ion-android-add”></i>
<i class=”icon ion-android-add-circle”></i>
<i class=”icon ion-android-remove”></i>
<i class=”icon ion-android-remove-circle”></i>
<i class=”icon ion-android-close”></i>
<i class=”icon ion-android-cancel”></i>
<i class=”icon ion-android-radio-button-off”></i>
<i class=”icon ion-android-radio-button-on”></i>
<i class=”icon ion-android-checkmark-circle”></i>
<i class=”icon ion-android-checkbox-outline-blank”></i>
<i class=”icon ion-android-checkbox-outline”></i>
<i class=”icon ion-android-checkbox-blank”></i>
<i class=”icon ion-android-checkbox”></i>
<i class=”icon ion-android-done”></i>
<i class=”icon ion-android-done-all”></i>
<i class=”icon ion-android-menu”></i>
<i class=”icon ion-android-more-horizontal”></i>
<i class=”icon ion-android-more-vertical”></i>
<i class=”icon ion-android-refresh”></i>
<i class=”icon ion-android-sync”></i>
<i class=”icon ion-android-wifi”></i>
<i class=”icon ion-android-call”></i>
<i class=”icon ion-android-apps”></i>
<i class=”icon ion-android-settings”></i>
<i class=”icon ion-android-options”></i>
<i class=”icon ion-android-funnel”></i>
<i class=”icon ion-android-search”></i>
<i class=”icon ion-android-home”></i>
<i class=”icon ion-android-cloud-outline”></i>
<i class=”icon ion-android-cloud”></i>
<i class=”icon ion-android-download”></i>
<i class=”icon ion-android-upload”></i>
<i class=”icon ion-android-cloud-done”></i>
<i class=”icon ion-android-cloud-circle”></i>
<i class=”icon ion-android-favorite-outline”></i>
<i class=”icon ion-android-favorite”></i>
<i class=”icon ion-android-star-outline”></i>
<i class=”icon ion-android-star-half”></i>
<i class=”icon ion-android-star”></i>
<i class=”icon ion-android-calendar”></i>
<i class=”icon ion-android-alarm-clock”></i>
<i class=”icon ion-android-time”></i>
<i class=”icon ion-android-stopwatch”></i>
<i class=”icon ion-android-watch”></i>
<i class=”icon ion-android-locate”></i>
<i class=”icon ion-android-navigate”></i>
<i class=”icon ion-android-pin”></i>
<i class=”icon ion-android-compass”></i>
<i class=”icon ion-android-map”></i>
<i class=”icon ion-android-walk”></i>
<i class=”icon ion-android-bicycle”></i>
<i class=”icon ion-android-car”></i>
<i class=”icon ion-android-bus”></i>
<i class=”icon ion-android-subway”></i>
<i class=”icon ion-android-train”></i>
<i class=”icon ion-android-boat”></i>
<i class=”icon ion-android-plane”></i>
<i class=”icon ion-android-restaurant”></i>
<i class=”icon ion-android-bar”></i>
<i class=”icon ion-android-cart”></i>
<i class=”icon ion-android-camera”></i>
<i class=”icon ion-android-image”></i>
<i class=”icon ion-android-film”></i>
<i class=”icon ion-android-color-palette”></i>
<i class=”icon ion-android-create”></i>
<i class=”icon ion-android-mail”></i>
<i class=”icon ion-android-drafts”></i>
<i class=”icon ion-android-send”></i>
<i class=”icon ion-android-archive”></i>
<i class=”icon ion-android-delete”></i>
<i class=”icon ion-android-attach”></i>
<i class=”icon ion-android-share”></i>
<i class=”icon ion-android-share-alt”></i>
<i class=”icon ion-android-bookmark”></i>
<i class=”icon ion-android-document”></i>
<i class=”icon ion-android-clipboard”></i>
<i class=”icon ion-android-list”></i>
<i class=”icon ion-android-folder-open”></i>
<i class=”icon ion-android-folder”></i>
<i class=”icon ion-android-print”></i>
<i class=”icon ion-android-open”></i>
<i class=”icon ion-android-exit”></i>
<i class=”icon ion-android-contract”></i>
<i class=”icon ion-android-expand”></i>
<i class=”icon ion-android-globe”></i>
<i class=”icon ion-android-chat”></i>
<i class=”icon ion-android-textsms”></i>
<i class=”icon ion-android-hangout”></i>
<i class=”icon ion-android-happy”></i>
<i class=”icon ion-android-sad”></i>
<i class=”icon ion-android-person”></i>
<i class=”icon ion-android-people”></i>
<i class=”icon ion-android-person-add”></i>
<i class=”icon ion-android-contact”></i>
<i class=”icon ion-android-contacts”></i>
<i class=”icon ion-android-playstore”></i>
<i class=”icon ion-android-lock”></i>
<i class=”icon ion-android-unlock”></i>
<i class=”icon ion-android-microphone”></i>
<i class=”icon ion-android-microphone-off”></i>
<i class=”icon ion-android-notifications-none”></i>
<i class=”icon ion-android-notifications”></i>
<i class=”icon ion-android-notifications-off”></i>
<i class=”icon ion-android-volume-mute”></i>
<i class=”icon ion-android-volume-down”></i>
<i class=”icon ion-android-volume-up”></i>
<i class=”icon ion-android-volume-off”></i>
<i class=”icon ion-android-hand”></i>
<i class=”icon ion-android-desktop”></i>
<i class=”icon ion-android-laptop”></i>
<i class=”icon ion-android-phone-portrait”></i>
<i class=”icon ion-android-phone-landscape”></i>
<i class=”icon ion-android-bulb”></i>
<i class=”icon ion-android-sunny”></i>
<i class=”icon ion-android-alert”></i>
<i class=”icon ion-android-warning”></i>

Icon Sosial Media pada Ionic

Icon	Hasil
<i class=”icon ion-social-twitter”></i>
<i class=”icon ion-social-twitter-outline”></i>
<i class=”icon ion-social-facebook”></i>
<i class=”icon ion-social-facebook-outline”></i>
<i class=”icon ion-social-googleplus”></i>
<i class=”icon ion-social-googleplus-outline”></i>
<i class=”icon ion-social-google”></i>
<i class=”icon ion-social-google-outline”></i>
<i class=”icon ion-social-dribbble”></i>
<i class=”icon ion-social-dribbble-outline”></i>
<i class=”icon ion-social-octocat”></i>
<i class=”icon ion-social-github”></i>
<i class=”icon ion-social-github-outline”></i>
<i class=”icon ion-social-instagram”></i>
<i class=”icon ion-social-instagram-outline”></i>
<i class=”icon ion-social-whatsapp”></i>
<i class=”icon ion-social-whatsapp-outline”></i>
<i class=”icon ion-social-snapchat”></i>
<i class=”icon ion-social-snapchat-outline”></i>
<i class=”icon ion-social-foursquare”></i>
<i class=”icon ion-social-foursquare-outline”></i>
<i class=”icon ion-social-pinterest”></i>
<i class=”icon ion-social-pinterest-outline”></i>
<i class=”icon ion-social-rss”></i>
<i class=”icon ion-social-rss-outline”></i>
<i class=”icon ion-social-tumblr”></i>
<i class=”icon ion-social-tumblr-outline”></i>
<i class=”icon ion-social-wordpress”></i>
<i class=”icon ion-social-wordpress-outline”></i>
<i class=”icon ion-social-reddit”></i>
<i class=”icon ion-social-reddit-outline”></i>
<i class=”icon ion-social-hackernews”></i>
<i class=”icon ion-social-hackernews-outline”></i>
<i class=”icon ion-social-designernews”></i>
<i class=”icon ion-social-designernews-outline”></i>
<i class=”icon ion-social-yahoo”></i>
<i class=”icon ion-social-yahoo-outline”></i>
<i class=”icon ion-social-buffer”></i>
<i class=”icon ion-social-buffer-outline”></i>
<i class=”icon ion-social-skype”></i>
<i class=”icon ion-social-skype-outline”></i>
<i class=”icon ion-social-linkedin”></i>
<i class=”icon ion-social-linkedin-outline”></i>
<i class=”icon ion-social-vimeo”></i>
<i class=”icon ion-social-vimeo-outline”></i>
<i class=”icon ion-social-twitch”></i>
<i class=”icon ion-social-twitch-outline”></i>
<i class=”icon ion-social-youtube”></i>
<i class=”icon ion-social-youtube-outline”></i>
<i class=”icon ion-social-dropbox”></i>
<i class=”icon ion-social-dropbox-outline”></i>
<i class=”icon ion-social-apple”></i>
<i class=”icon ion-social-apple-outline”></i>
<i class=”icon ion-social-android”></i>
<i class=”icon ion-social-android-outline”></i>
<i class=”icon ion-social-windows”></i>
<i class=”icon ion-social-windows-outline”></i>
<i class=”icon ion-social-html5″></i>
<i class=”icon ion-social-html5-outline”></i>
<i class=”icon ion-social-css3″></i>
<i class=”icon ion-social-css3-outline”></i>
<i class=”icon ion-social-javascript”></i>
<i class=”icon ion-social-javascript-outline”></i>
<i class=”icon ion-social-angular”></i>
<i class=”icon ion-social-angular-outline”></i>
<i class=”icon ion-social-nodejs”></i>
<i class=”icon ion-social-sass”></i>
<i class=”icon ion-social-python”></i>
<i class=”icon ion-social-chrome”></i>
<i class=”icon ion-social-chrome-outline”></i>
<i class=”icon ion-social-codepen”></i>
<i class=”icon ion-social-codepen-outline”></i>
<i class=”icon ion-social-markdown”></i>
<i class=”icon ion-social-tux”></i>
<i class=”icon ion-social-freebsd-devil”></i>
<i class=”icon ion-social-usd”></i>
<i class=”icon ion-social-usd-outline”></i>
<i class=”icon ion-social-bitcoin”></i>
<i class=”icon ion-social-bitcoin-outline”></i>
<i class=”icon ion-social-yen”></i>
<i class=”icon ion-social-yen-outline”></i>
<i class=”icon ion-social-euro”></i>
<i class=”icon ion-social-euro-outline”></i>

berikut contoh cara menggunakan icon pada ionic ini :

icon pada tab menu

</a>

</a>

</a>

</div>

Untuk menggunakan ion pada tab menu ini kita tinggal memanggil class icon, misalnya kita menggunakan icon ion-home.

oke, sekian dulu pembahasan tentang icon pada ionic. ingat ionic memang menyediakan icon defaultnya, akan tetapi kita juga bisa menggunakan icon sendiri.

oke, saya rasa sekian dulu materi tentang icon, saya mohon maaf karena gambar icon pada tabel belum bisa di tampilkan (maklum sedang dalam pengembangan) heheh

Terima Kasih.