UNPKG

ionicons

Version:

Premium icons for Ionic.

ionicons.com

ionic-team/ionicons

3,947 lines • 73.3 kB
<!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
  </td>
  <td class="align-center">
    <ion-icon name="ios-pause"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pause"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    paw
  </td>
  <td class="align-center">
    <ion-icon name="ios-paw"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-paw"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    people
  </td>
  <td class="align-center">
    <ion-icon name="ios-people"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-people"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    person
  </td>
  <td class="align-center">
    <ion-icon name="ios-person"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-person"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    person-add
  </td>
  <td class="align-center">
    <ion-icon name="ios-person-add"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-person-add"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    phone-landscape
  </td>
  <td class="align-center">
    <ion-icon name="ios-phone-landscape"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-phone-landscape"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    phone-portrait
  </td>
  <td class="align-center">
    <ion-icon name="ios-phone-portrait"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-phone-portrait"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    photos
  </td>
  <td class="align-center">
    <ion-icon name="ios-photos"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-photos"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pie
  </td>
  <td class="align-center">
    <ion-icon name="ios-pie"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pie"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pin
  </td>
  <td class="align-center">
    <ion-icon name="ios-pin"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pin"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pint
  </td>
  <td class="align-center">
    <ion-icon name="ios-pint"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pint"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pizza
  </td>
  <td class="align-center">
    <ion-icon name="ios-pizza"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pizza"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    planet
  </td>
  <td class="align-center">
    <ion-icon name="ios-planet"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-planet"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    play
  </td>
  <td class="align-center">
    <ion-icon name="ios-play"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-play"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    play-circle
  </td>
  <td class="align-center">
    <ion-icon name="ios-play-circle"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-play-circle"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    podium
  </td>
  <td class="align-center">
    <ion-icon name="ios-podium"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-podium"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    power
  </td>
  <td class="align-center">
    <ion-icon name="ios-power"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-power"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pricetag
  </td>
  <td class="align-center">
    <ion-icon name="ios-pricetag"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pricetag"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pricetags
  </td>
  <td class="align-center">
    <ion-icon name="ios-pricetags"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pricetags"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    print
  </td>
  <td class="align-center">
    <ion-icon name="ios-print"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-print"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    pulse
  </td>
  <td class="align-center">
    <ion-icon name="ios-pulse"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-pulse"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    qr-scanner
  </td>
  <td class="align-center">
    <ion-icon name="ios-qr-scanner"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-qr-scanner"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    quote
  </td>
  <td class="align-center">
    <ion-icon name="ios-quote"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-quote"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    radio
  </td>
  <td class="align-center">
    <ion-icon name="ios-radio"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-radio"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    radio-button-off
  </td>
  <td class="align-center">
    <ion-icon name="ios-radio-button-off"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-radio-button-off"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    radio-button-on
  </td>
  <td class="align-center">
    <ion-icon name="ios-radio-button-on"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-radio-button-on"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    rainy
  </td>
  <td class="align-center">
    <ion-icon name="ios-rainy"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-rainy"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    recording
  </td>
  <td class="align-center">
    <ion-icon name="ios-recording"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-recording"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    redo
  </td>
  <td class="align-center">
    <ion-icon name="ios-redo"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-redo"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    refresh
  </td>
  <td class="align-center">
    <ion-icon name="ios-refresh"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-refresh"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    refresh-circle
  </td>
  <td class="align-center">
    <ion-icon name="ios-refresh-circle"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-refresh-circle"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    remove
  </td>
  <td class="align-center">
    <ion-icon name="ios-remove"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-remove"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    remove-circle
  </td>
  <td class="align-center">
    <ion-icon name="ios-remove-circle"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-remove-circle"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    remove-circle-outline
  </td>
  <td class="align-center">
    <ion-icon name="ios-remove-circle-outline"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-remove-circle-outline"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    reorder
  </td>
  <td class="align-center">
    <ion-icon name="ios-reorder"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-reorder"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    repeat
  </td>
  <td class="align-center">
    <ion-icon name="ios-repeat"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-repeat"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    resize
  </td>
  <td class="align-center">
    <ion-icon name="ios-resize"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-resize"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    restaurant
  </td>
  <td class="align-center">
    <ion-icon name="ios-restaurant"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-restaurant"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    return-left
  </td>
  <td class="align-center">
    <ion-icon name="ios-return-left"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-return-left"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    return-right
  </td>
  <td class="align-center">
    <ion-icon name="ios-return-right"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-return-right"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    reverse-camera
  </td>
  <td class="align-center">
    <ion-icon name="ios-reverse-camera"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-reverse-camera"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    rewind
  </td>
  <td class="align-center">
    <ion-icon name="ios-rewind"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-rewind"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    ribbon
  </td>
  <td class="align-center">
    <ion-icon name="ios-ribbon"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-ribbon"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    rocket
  </td>
  <td class="align-center">
    <ion-icon name="ios-rocket"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-rocket"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    rose
  </td>
  <td class="align-center">
    <ion-icon name="ios-rose"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-rose"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    sad
  </td>
  <td class="align-center">
    <ion-icon name="ios-sad"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-sad"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    save
  </td>
  <td class="align-center">
    <ion-icon name="ios-save"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-save"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    school
  </td>
  <td class="align-center">
    <ion-icon name="ios-school"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-school"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    search
  </td>
  <td class="align-center">
    <ion-icon name="ios-search"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-search"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    send
  </td>
  <td class="align-center">
    <ion-icon name="ios-send"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-send"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    settings
  </td>
  <td class="align-center">
    <ion-icon name="ios-settings"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-settings"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    share
  </td>
  <td class="align-center">
    <ion-icon name="ios-share"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-share"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    share-alt
  </td>
  <td class="align-center">
    <ion-icon name="ios-share-alt"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-share-alt"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    shirt
  </td>
  <td class="align-center">
    <ion-icon name="ios-shirt"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-shirt"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    shuffle
  </td>
  <td class="align-center">
    <ion-icon name="ios-shuffle"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-shuffle"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    skip-backward
  </td>
  <td class="align-center">
    <ion-icon name="ios-skip-backward"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-skip-backward"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    skip-forward
  </td>
  <td class="align-center">
    <ion-icon name="ios-skip-forward"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-skip-forward"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    snow
  </td>
  <td class="align-center">
    <ion-icon name="ios-snow"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-snow"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    speedometer
  </td>
  <td class="align-center">
    <ion-icon name="ios-speedometer"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-speedometer"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    square
  </td>
  <td class="align-center">
    <ion-icon name="ios-square"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-square"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    square-outline
  </td>
  <td class="align-center">
    <ion-icon name="ios-square-outline"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-square-outline"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    star
  </td>
  <td class="align-center">
    <ion-icon name="ios-star"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-star"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    star-half
  </td>
  <td class="align-center">
    <ion-icon name="ios-star-half"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-star-half"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    star-outline
  </td>
  <td class="align-center">
    <ion-icon name="ios-star-outline"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-star-outline"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    stats
  </td>
  <td class="align-center">
    <ion-icon name="ios-stats"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-stats"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    stopwatch
  </td>
  <td class="align-center">
    <ion-icon name="ios-stopwatch"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-stopwatch"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    subway
  </td>
  <td class="align-center">
    <ion-icon name="ios-subway"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-subway"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    sunny
  </td>
  <td class="align-center">
    <ion-icon name="ios-sunny"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-sunny"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    swap
  </td>
  <td class="align-center">
    <ion-icon name="ios-swap"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-swap"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    switch
  </td>
  <td class="align-center">
    <ion-icon name="ios-switch"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-switch"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    sync
  </td>
  <td class="align-center">
    <ion-icon name="ios-sync"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-sync"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    tablet-landscape
  </td>
  <td class="align-center">
    <ion-icon name="ios-tablet-landscape"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-tablet-landscape"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    tablet-portrait
  </td>
  <td class="align-center">
    <ion-icon name="ios-tablet-portrait"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-tablet-portrait"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    tennisball
  </td>
  <td class="align-center">
    <ion-icon name="ios-tennisball"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-tennisball"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    text
  </td>
  <td class="align-center">
    <ion-icon name="ios-text"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-text"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    thermometer
  </td>
  <td class="align-center">
    <ion-icon name="ios-thermometer"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-thermometer"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    thumbs-down
  </td>
  <td class="align-center">
    <ion-icon name="ios-thumbs-down"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-thumbs-down"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    thumbs-up
  </td>
  <td class="align-center">
    <ion-icon name="ios-thumbs-up"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-thumbs-up"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    thunderstorm
  </td>
  <td class="align-center">
    <ion-icon name="ios-thunderstorm"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-thunderstorm"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    time
  </td>
  <td class="align-center">
    <ion-icon name="ios-time"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-time"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    timer
  </td>
  <td class="align-center">
    <ion-icon name="ios-timer"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-timer"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    today
  </td>
  <td class="align-center">
    <ion-icon name="ios-today"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-today"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    train
  </td>
  <td class="align-center">
    <ion-icon name="ios-train"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-train"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    transgender
  </td>
  <td class="align-center">
    <ion-icon name="ios-transgender"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-transgender"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    trash
  </td>
  <td class="align-center">
    <ion-icon name="ios-trash"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-trash"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    trending-down
  </td>
  <td class="align-center">
    <ion-icon name="ios-trending-down"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-trending-down"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    trending-up
  </td>
  <td class="align-center">
    <ion-icon name="ios-trending-up"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-trending-up"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    trophy
  </td>
  <td class="align-center">
    <ion-icon name="ios-trophy"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-trophy"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    tv
  </td>
  <td class="align-center">
    <ion-icon name="ios-tv"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-tv"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    umbrella
  </td>
  <td class="align-center">
    <ion-icon name="ios-umbrella"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-umbrella"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    undo
  </td>
  <td class="align-center">
    <ion-icon name="ios-undo"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-undo"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    unlock
  </td>
  <td class="align-center">
    <ion-icon name="ios-unlock"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-unlock"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    videocam
  </td>
  <td class="align-center">
    <ion-icon name="ios-videocam"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-videocam"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    volume-high
  </td>
  <td class="align-center">
    <ion-icon name="ios-volume-high"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-volume-high"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    volume-low
  </td>
  <td class="align-center">
    <ion-icon name="ios-volume-low"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-volume-low"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    volume-mute
  </td>
  <td class="align-center">
    <ion-icon name="ios-volume-mute"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-volume-mute"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    volume-off
  </td>
  <td class="align-center">
    <ion-icon name="ios-volume-off"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-volume-off"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    walk
  </td>
  <td class="align-center">
    <ion-icon name="ios-walk"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-walk"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    wallet
  </td>
  <td class="align-center">
    <ion-icon name="ios-wallet"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-wallet"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    warning
  </td>
  <td class="align-center">
    <ion-icon name="ios-warning"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-warning"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    watch
  </td>
  <td class="align-center">
    <ion-icon name="ios-watch"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-watch"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    water
  </td>
  <td class="align-center">
    <ion-icon name="ios-water"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-water"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    wifi
  </td>
  <td class="align-center">
    <ion-icon name="ios-wifi"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-wifi"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    wine
  </td>
  <td class="align-center">
    <ion-icon name="ios-wine"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-wine"></ion-icon>
  </div>
</tr>

<tr class="mode-row">
  <td>
    woman
  </td>
  <td class="align-center">
    <ion-icon name="ios-woman"></ion-icon>
  </div>
  <td class="align-center">
    <ion-icon name="md-woman"></ion-icon>
  </div>
</tr>

    </table>
    <footer>
      Made with <ion-icon class="heart" name="md-heart"></ion-icon> by the <a href="http://ionicframework.com/">Ionic Team</a>
    </footer>
  </main>
</body>
</html>