ionicons
Version:
Premium icons for Ionic.
2,682 lines (2,453 loc) • 73.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ionicons Cheatsheet</title>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Eina Bold */
@font-face {
font-family: 'Eina';
src: url('../assets/fonts/34E6DB_F_0.eot');
src: url('../assets/fonts/34E6DB_F_0.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/34E6DB_F_0.woff2') format('woff2'),
url('../assets/fonts/34E6DB_F_0.woff') format('woff'),
url('../assets/fonts/34E6DB_F_0.ttf') format('truetype');
font-weight: 700;
unicode-range: U+000-5FF;
}
/* Eina Regular */
@font-face {
font-family: 'Eina';
src: url('../assets/fonts/34E6DB_D_0.eot');
src: url('../assets/fonts/34E6DB_D_0.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/34E6DB_D_0.woff2') format('woff2'),
url('../assets/fonts/34E6DB_D_0.woff') format('woff'),
url('../assets/fonts/34E6DB_D_0.ttf') format('truetype');
font-weight: 400;
unicode-range: U+000-5FF;
}
body {
background: #fff;
color: #444;
font: 16px/1.5 'Eina', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
}
a, a:visited {
color: #888;
text-decoration: underline;
}
a:hover, a:focus { color: #000; }
header {
overflow: hidden;
padding: 20px 0;
}
h1 {
float: left;
font-size: 24px;
font-weight: 700;
}
main {
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
table {
width: 100%;
border-spacing: 0;
}
tr {
padding: 0 0 10px;
margin-bottom: 10px;
}
th,
td {
padding: 4px;
width: 33%;
border: 0;
border-bottom: 1px solid #ddd;
white-space: nowrap;
text-align: left;
}
th {
color: #888;
}
ion-icon {
display: block;
margin: 5px 0;
font-size: 32px;
}
footer {
color: #888;
font-size: 12px;
padding: 20px 0;
}
.heart {
display: inline-block;
padding-top: 4px;
width: 18px;
height: 18px;
color: red;
vertical-align: sub;
}
</style>
<script src="ionicons.js"></script>
</head>
<body>
<main>
<header>
<h1>Ionicons Cheatsheet, 318 icons</h1>
</header>
<table>
<tr>
<th>
Icon Name
</th>
<th>
iOS
</th>
<th>
Material Design
</th>
</tr>
<tr class="mode-row">
<td>
add
</td>
<td class="align-center">
<ion-icon name="ios-add"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-add"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
add-circle
</td>
<td class="align-center">
<ion-icon name="ios-add-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-add-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
add-circle-outline
</td>
<td class="align-center">
<ion-icon name="ios-add-circle-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-add-circle-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
airplane
</td>
<td class="align-center">
<ion-icon name="ios-airplane"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-airplane"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
alarm
</td>
<td class="align-center">
<ion-icon name="ios-alarm"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-alarm"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
albums
</td>
<td class="align-center">
<ion-icon name="ios-albums"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-albums"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
alert
</td>
<td class="align-center">
<ion-icon name="ios-alert"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-alert"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
american-football
</td>
<td class="align-center">
<ion-icon name="ios-american-football"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-american-football"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
analytics
</td>
<td class="align-center">
<ion-icon name="ios-analytics"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-analytics"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
aperture
</td>
<td class="align-center">
<ion-icon name="ios-aperture"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-aperture"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
apps
</td>
<td class="align-center">
<ion-icon name="ios-apps"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-apps"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
appstore
</td>
<td class="align-center">
<ion-icon name="ios-appstore"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-appstore"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
archive
</td>
<td class="align-center">
<ion-icon name="ios-archive"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-archive"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-back
</td>
<td class="align-center">
<ion-icon name="ios-arrow-back"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-back"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-down
</td>
<td class="align-center">
<ion-icon name="ios-arrow-down"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-down"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropdown
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropdown"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropdown"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropdown-circle
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropdown-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropdown-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropleft
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropleft"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropleft"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropleft-circle
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropleft-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropleft-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropright
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropright"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropright"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropright-circle
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropright-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropright-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropup
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropup"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropup"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-dropup-circle
</td>
<td class="align-center">
<ion-icon name="ios-arrow-dropup-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-dropup-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-forward
</td>
<td class="align-center">
<ion-icon name="ios-arrow-forward"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-forward"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-round-back
</td>
<td class="align-center">
<ion-icon name="ios-arrow-round-back"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-round-back"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-round-down
</td>
<td class="align-center">
<ion-icon name="ios-arrow-round-down"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-round-down"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-round-forward
</td>
<td class="align-center">
<ion-icon name="ios-arrow-round-forward"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-round-forward"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-round-up
</td>
<td class="align-center">
<ion-icon name="ios-arrow-round-up"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-round-up"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
arrow-up
</td>
<td class="align-center">
<ion-icon name="ios-arrow-up"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-arrow-up"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
at
</td>
<td class="align-center">
<ion-icon name="ios-at"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-at"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
attach
</td>
<td class="align-center">
<ion-icon name="ios-attach"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-attach"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
backspace
</td>
<td class="align-center">
<ion-icon name="ios-backspace"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-backspace"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
barcode
</td>
<td class="align-center">
<ion-icon name="ios-barcode"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-barcode"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
baseball
</td>
<td class="align-center">
<ion-icon name="ios-baseball"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-baseball"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
basket
</td>
<td class="align-center">
<ion-icon name="ios-basket"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-basket"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
basketball
</td>
<td class="align-center">
<ion-icon name="ios-basketball"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-basketball"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
battery-charging
</td>
<td class="align-center">
<ion-icon name="ios-battery-charging"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-battery-charging"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
battery-dead
</td>
<td class="align-center">
<ion-icon name="ios-battery-dead"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-battery-dead"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
battery-full
</td>
<td class="align-center">
<ion-icon name="ios-battery-full"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-battery-full"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
beaker
</td>
<td class="align-center">
<ion-icon name="ios-beaker"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-beaker"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bed
</td>
<td class="align-center">
<ion-icon name="ios-bed"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bed"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
beer
</td>
<td class="align-center">
<ion-icon name="ios-beer"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-beer"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bicycle
</td>
<td class="align-center">
<ion-icon name="ios-bicycle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bicycle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bluetooth
</td>
<td class="align-center">
<ion-icon name="ios-bluetooth"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bluetooth"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
boat
</td>
<td class="align-center">
<ion-icon name="ios-boat"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-boat"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
body
</td>
<td class="align-center">
<ion-icon name="ios-body"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-body"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bonfire
</td>
<td class="align-center">
<ion-icon name="ios-bonfire"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bonfire"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
book
</td>
<td class="align-center">
<ion-icon name="ios-book"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-book"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bookmark
</td>
<td class="align-center">
<ion-icon name="ios-bookmark"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bookmark"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bookmarks
</td>
<td class="align-center">
<ion-icon name="ios-bookmarks"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bookmarks"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bowtie
</td>
<td class="align-center">
<ion-icon name="ios-bowtie"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bowtie"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
briefcase
</td>
<td class="align-center">
<ion-icon name="ios-briefcase"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-briefcase"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
browsers
</td>
<td class="align-center">
<ion-icon name="ios-browsers"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-browsers"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
brush
</td>
<td class="align-center">
<ion-icon name="ios-brush"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-brush"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bug
</td>
<td class="align-center">
<ion-icon name="ios-bug"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bug"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
build
</td>
<td class="align-center">
<ion-icon name="ios-build"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-build"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bulb
</td>
<td class="align-center">
<ion-icon name="ios-bulb"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bulb"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
bus
</td>
<td class="align-center">
<ion-icon name="ios-bus"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-bus"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
business
</td>
<td class="align-center">
<ion-icon name="ios-business"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-business"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cafe
</td>
<td class="align-center">
<ion-icon name="ios-cafe"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cafe"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
calculator
</td>
<td class="align-center">
<ion-icon name="ios-calculator"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-calculator"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
calendar
</td>
<td class="align-center">
<ion-icon name="ios-calendar"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-calendar"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
call
</td>
<td class="align-center">
<ion-icon name="ios-call"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-call"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
camera
</td>
<td class="align-center">
<ion-icon name="ios-camera"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-camera"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
car
</td>
<td class="align-center">
<ion-icon name="ios-car"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-car"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
card
</td>
<td class="align-center">
<ion-icon name="ios-card"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-card"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cart
</td>
<td class="align-center">
<ion-icon name="ios-cart"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cart"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cash
</td>
<td class="align-center">
<ion-icon name="ios-cash"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cash"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cellular
</td>
<td class="align-center">
<ion-icon name="ios-cellular"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cellular"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
chatboxes
</td>
<td class="align-center">
<ion-icon name="ios-chatboxes"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-chatboxes"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
chatbubbles
</td>
<td class="align-center">
<ion-icon name="ios-chatbubbles"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-chatbubbles"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
checkbox
</td>
<td class="align-center">
<ion-icon name="ios-checkbox"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-checkbox"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
checkbox-outline
</td>
<td class="align-center">
<ion-icon name="ios-checkbox-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-checkbox-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
checkmark
</td>
<td class="align-center">
<ion-icon name="ios-checkmark"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-checkmark"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
checkmark-circle
</td>
<td class="align-center">
<ion-icon name="ios-checkmark-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-checkmark-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
checkmark-circle-outline
</td>
<td class="align-center">
<ion-icon name="ios-checkmark-circle-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-checkmark-circle-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
clipboard
</td>
<td class="align-center">
<ion-icon name="ios-clipboard"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-clipboard"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
clock
</td>
<td class="align-center">
<ion-icon name="ios-clock"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-clock"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
close
</td>
<td class="align-center">
<ion-icon name="ios-close"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-close"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
close-circle
</td>
<td class="align-center">
<ion-icon name="ios-close-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-close-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
close-circle-outline
</td>
<td class="align-center">
<ion-icon name="ios-close-circle-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-close-circle-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloud
</td>
<td class="align-center">
<ion-icon name="ios-cloud"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloud"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloud-circle
</td>
<td class="align-center">
<ion-icon name="ios-cloud-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloud-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloud-done
</td>
<td class="align-center">
<ion-icon name="ios-cloud-done"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloud-done"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloud-download
</td>
<td class="align-center">
<ion-icon name="ios-cloud-download"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloud-download"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloud-outline
</td>
<td class="align-center">
<ion-icon name="ios-cloud-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloud-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloud-upload
</td>
<td class="align-center">
<ion-icon name="ios-cloud-upload"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloud-upload"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloudy
</td>
<td class="align-center">
<ion-icon name="ios-cloudy"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloudy"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cloudy-night
</td>
<td class="align-center">
<ion-icon name="ios-cloudy-night"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cloudy-night"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
code
</td>
<td class="align-center">
<ion-icon name="ios-code"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-code"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
code-download
</td>
<td class="align-center">
<ion-icon name="ios-code-download"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-code-download"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
code-working
</td>
<td class="align-center">
<ion-icon name="ios-code-working"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-code-working"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cog
</td>
<td class="align-center">
<ion-icon name="ios-cog"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cog"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
color-fill
</td>
<td class="align-center">
<ion-icon name="ios-color-fill"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-color-fill"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
color-filter
</td>
<td class="align-center">
<ion-icon name="ios-color-filter"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-color-filter"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
color-palette
</td>
<td class="align-center">
<ion-icon name="ios-color-palette"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-color-palette"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
color-wand
</td>
<td class="align-center">
<ion-icon name="ios-color-wand"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-color-wand"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
compass
</td>
<td class="align-center">
<ion-icon name="ios-compass"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-compass"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
construct
</td>
<td class="align-center">
<ion-icon name="ios-construct"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-construct"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
contact
</td>
<td class="align-center">
<ion-icon name="ios-contact"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-contact"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
contacts
</td>
<td class="align-center">
<ion-icon name="ios-contacts"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-contacts"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
contract
</td>
<td class="align-center">
<ion-icon name="ios-contract"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-contract"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
contrast
</td>
<td class="align-center">
<ion-icon name="ios-contrast"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-contrast"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
copy
</td>
<td class="align-center">
<ion-icon name="ios-copy"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-copy"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
create
</td>
<td class="align-center">
<ion-icon name="ios-create"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-create"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
crop
</td>
<td class="align-center">
<ion-icon name="ios-crop"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-crop"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cube
</td>
<td class="align-center">
<ion-icon name="ios-cube"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cube"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
cut
</td>
<td class="align-center">
<ion-icon name="ios-cut"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-cut"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
desktop
</td>
<td class="align-center">
<ion-icon name="ios-desktop"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-desktop"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
disc
</td>
<td class="align-center">
<ion-icon name="ios-disc"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-disc"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
document
</td>
<td class="align-center">
<ion-icon name="ios-document"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-document"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
done-all
</td>
<td class="align-center">
<ion-icon name="ios-done-all"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-done-all"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
download
</td>
<td class="align-center">
<ion-icon name="ios-download"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-download"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
easel
</td>
<td class="align-center">
<ion-icon name="ios-easel"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-easel"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
egg
</td>
<td class="align-center">
<ion-icon name="ios-egg"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-egg"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
exit
</td>
<td class="align-center">
<ion-icon name="ios-exit"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-exit"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
expand
</td>
<td class="align-center">
<ion-icon name="ios-expand"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-expand"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
eye
</td>
<td class="align-center">
<ion-icon name="ios-eye"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-eye"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
eye-off
</td>
<td class="align-center">
<ion-icon name="ios-eye-off"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-eye-off"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
fastforward
</td>
<td class="align-center">
<ion-icon name="ios-fastforward"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-fastforward"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
female
</td>
<td class="align-center">
<ion-icon name="ios-female"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-female"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
filing
</td>
<td class="align-center">
<ion-icon name="ios-filing"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-filing"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
film
</td>
<td class="align-center">
<ion-icon name="ios-film"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-film"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
finger-print
</td>
<td class="align-center">
<ion-icon name="ios-finger-print"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-finger-print"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
fitness
</td>
<td class="align-center">
<ion-icon name="ios-fitness"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-fitness"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flag
</td>
<td class="align-center">
<ion-icon name="ios-flag"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flag"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flame
</td>
<td class="align-center">
<ion-icon name="ios-flame"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flame"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flash
</td>
<td class="align-center">
<ion-icon name="ios-flash"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flash"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flash-off
</td>
<td class="align-center">
<ion-icon name="ios-flash-off"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flash-off"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flashlight
</td>
<td class="align-center">
<ion-icon name="ios-flashlight"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flashlight"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flask
</td>
<td class="align-center">
<ion-icon name="ios-flask"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flask"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
flower
</td>
<td class="align-center">
<ion-icon name="ios-flower"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-flower"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
folder
</td>
<td class="align-center">
<ion-icon name="ios-folder"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-folder"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
folder-open
</td>
<td class="align-center">
<ion-icon name="ios-folder-open"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-folder-open"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
football
</td>
<td class="align-center">
<ion-icon name="ios-football"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-football"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
funnel
</td>
<td class="align-center">
<ion-icon name="ios-funnel"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-funnel"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
gift
</td>
<td class="align-center">
<ion-icon name="ios-gift"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-gift"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
git-branch
</td>
<td class="align-center">
<ion-icon name="ios-git-branch"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-git-branch"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
git-commit
</td>
<td class="align-center">
<ion-icon name="ios-git-commit"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-git-commit"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
git-compare
</td>
<td class="align-center">
<ion-icon name="ios-git-compare"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-git-compare"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
git-merge
</td>
<td class="align-center">
<ion-icon name="ios-git-merge"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-git-merge"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
git-network
</td>
<td class="align-center">
<ion-icon name="ios-git-network"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-git-network"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
git-pull-request
</td>
<td class="align-center">
<ion-icon name="ios-git-pull-request"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-git-pull-request"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
glasses
</td>
<td class="align-center">
<ion-icon name="ios-glasses"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-glasses"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
globe
</td>
<td class="align-center">
<ion-icon name="ios-globe"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-globe"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
grid
</td>
<td class="align-center">
<ion-icon name="ios-grid"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-grid"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
hammer
</td>
<td class="align-center">
<ion-icon name="ios-hammer"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-hammer"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
hand
</td>
<td class="align-center">
<ion-icon name="ios-hand"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-hand"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
happy
</td>
<td class="align-center">
<ion-icon name="ios-happy"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-happy"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
headset
</td>
<td class="align-center">
<ion-icon name="ios-headset"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-headset"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
heart
</td>
<td class="align-center">
<ion-icon name="ios-heart"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-heart"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
heart-dislike
</td>
<td class="align-center">
<ion-icon name="ios-heart-dislike"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-heart-dislike"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
heart-empty
</td>
<td class="align-center">
<ion-icon name="ios-heart-empty"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-heart-empty"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
heart-half
</td>
<td class="align-center">
<ion-icon name="ios-heart-half"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-heart-half"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
help
</td>
<td class="align-center">
<ion-icon name="ios-help"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-help"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
help-buoy
</td>
<td class="align-center">
<ion-icon name="ios-help-buoy"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-help-buoy"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
help-circle
</td>
<td class="align-center">
<ion-icon name="ios-help-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-help-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
help-circle-outline
</td>
<td class="align-center">
<ion-icon name="ios-help-circle-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-help-circle-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
home
</td>
<td class="align-center">
<ion-icon name="ios-home"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-home"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
hourglass
</td>
<td class="align-center">
<ion-icon name="ios-hourglass"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-hourglass"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
ice-cream
</td>
<td class="align-center">
<ion-icon name="ios-ice-cream"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-ice-cream"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
image
</td>
<td class="align-center">
<ion-icon name="ios-image"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-image"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
images
</td>
<td class="align-center">
<ion-icon name="ios-images"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-images"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
infinite
</td>
<td class="align-center">
<ion-icon name="ios-infinite"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-infinite"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
information
</td>
<td class="align-center">
<ion-icon name="ios-information"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-information"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
information-circle
</td>
<td class="align-center">
<ion-icon name="ios-information-circle"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-information-circle"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
information-circle-outline
</td>
<td class="align-center">
<ion-icon name="ios-information-circle-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-information-circle-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
jet
</td>
<td class="align-center">
<ion-icon name="ios-jet"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-jet"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
journal
</td>
<td class="align-center">
<ion-icon name="ios-journal"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-journal"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
key
</td>
<td class="align-center">
<ion-icon name="ios-key"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-key"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
keypad
</td>
<td class="align-center">
<ion-icon name="ios-keypad"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-keypad"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
laptop
</td>
<td class="align-center">
<ion-icon name="ios-laptop"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-laptop"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
leaf
</td>
<td class="align-center">
<ion-icon name="ios-leaf"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-leaf"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
link
</td>
<td class="align-center">
<ion-icon name="ios-link"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-link"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
list
</td>
<td class="align-center">
<ion-icon name="ios-list"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-list"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
list-box
</td>
<td class="align-center">
<ion-icon name="ios-list-box"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-list-box"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
locate
</td>
<td class="align-center">
<ion-icon name="ios-locate"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-locate"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
lock
</td>
<td class="align-center">
<ion-icon name="ios-lock"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-lock"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
log-in
</td>
<td class="align-center">
<ion-icon name="ios-log-in"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-log-in"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
log-out
</td>
<td class="align-center">
<ion-icon name="ios-log-out"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-log-out"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
magnet
</td>
<td class="align-center">
<ion-icon name="ios-magnet"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-magnet"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
mail
</td>
<td class="align-center">
<ion-icon name="ios-mail"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-mail"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
mail-open
</td>
<td class="align-center">
<ion-icon name="ios-mail-open"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-mail-open"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
mail-unread
</td>
<td class="align-center">
<ion-icon name="ios-mail-unread"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-mail-unread"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
male
</td>
<td class="align-center">
<ion-icon name="ios-male"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-male"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
man
</td>
<td class="align-center">
<ion-icon name="ios-man"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-man"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
map
</td>
<td class="align-center">
<ion-icon name="ios-map"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-map"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
medal
</td>
<td class="align-center">
<ion-icon name="ios-medal"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-medal"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
medical
</td>
<td class="align-center">
<ion-icon name="ios-medical"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-medical"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
medkit
</td>
<td class="align-center">
<ion-icon name="ios-medkit"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-medkit"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
megaphone
</td>
<td class="align-center">
<ion-icon name="ios-megaphone"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-megaphone"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
menu
</td>
<td class="align-center">
<ion-icon name="ios-menu"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-menu"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
mic
</td>
<td class="align-center">
<ion-icon name="ios-mic"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-mic"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
mic-off
</td>
<td class="align-center">
<ion-icon name="ios-mic-off"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-mic-off"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
microphone
</td>
<td class="align-center">
<ion-icon name="ios-microphone"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-microphone"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
moon
</td>
<td class="align-center">
<ion-icon name="ios-moon"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-moon"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
more
</td>
<td class="align-center">
<ion-icon name="ios-more"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-more"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
move
</td>
<td class="align-center">
<ion-icon name="ios-move"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-move"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
musical-note
</td>
<td class="align-center">
<ion-icon name="ios-musical-note"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-musical-note"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
musical-notes
</td>
<td class="align-center">
<ion-icon name="ios-musical-notes"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-musical-notes"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
navigate
</td>
<td class="align-center">
<ion-icon name="ios-navigate"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-navigate"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
notifications
</td>
<td class="align-center">
<ion-icon name="ios-notifications"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-notifications"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
notifications-off
</td>
<td class="align-center">
<ion-icon name="ios-notifications-off"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-notifications-off"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
notifications-outline
</td>
<td class="align-center">
<ion-icon name="ios-notifications-outline"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-notifications-outline"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
nuclear
</td>
<td class="align-center">
<ion-icon name="ios-nuclear"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-nuclear"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
nutrition
</td>
<td class="align-center">
<ion-icon name="ios-nutrition"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-nutrition"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
open
</td>
<td class="align-center">
<ion-icon name="ios-open"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-open"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
options
</td>
<td class="align-center">
<ion-icon name="ios-options"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-options"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
outlet
</td>
<td class="align-center">
<ion-icon name="ios-outlet"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-outlet"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
paper
</td>
<td class="align-center">
<ion-icon name="ios-paper"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-paper"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
paper-plane
</td>
<td class="align-center">
<ion-icon name="ios-paper-plane"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-paper-plane"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
partly-sunny
</td>
<td class="align-center">
<ion-icon name="ios-partly-sunny"></ion-icon>
</div>
<td class="align-center">
<ion-icon name="md-partly-sunny"></ion-icon>
</div>
</tr>
<tr class="mode-row">
<td>
pause