materialize
/
css-icons.html

<!DOCTYPE html>
<html lang="en">

<!--================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.0
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================ -->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">
  <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">
  <title>Icons | Materialize - Material Design Admin Template</title>

  <!-- Favicons-->
  <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
  <!-- Favicons-->
  <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
  <!-- For iPhone -->
  <meta name="msapplication-TileColor" content="#00bcd4">
  <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
  <!-- For Windows Phone -->


  <!-- CORE CSS-->

  <link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <!-- Custome CSS-->
    <link href="css/custom/custom-style.css" type="text/css" rel="stylesheet" media="screen,projection">


  <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
  <link href="js/plugins/prism/prism.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="js/plugins/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet" media="screen,projection">
  <link href="js/plugins/chartist-js/chartist.min.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>

<body>
  <!-- Start Page Loading -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <!-- End Page Loading -->

  <!-- //////////////////////////////////////////////////////////////////////////// -->

  <!-- START HEADER -->
  <header id="header" class="page-topbar">
        <!-- start header nav-->
        <div class="navbar-fixed">
            <nav class="navbar-color">
                <div class="nav-wrapper">
                    <ul class="left">
                      <li><h1 class="logo-wrapper"><a href="index.html" class="brand-logo darken-1"><img src="images/materialize-logo.png" alt="materialize logo"></a> <span class="logo-text">Materialize</span></h1></li>
                    </ul>
                    <div class="header-search-wrapper hide-on-med-and-down">
                        <i class="mdi-action-search"></i>
                        <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize"/>
                    </div>
                    <ul class="right hide-on-med-and-down">
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light translation-button"  data-activates="translation-dropdown"><img src="images/flag-icons/United-States.png" alt="USA" /></a>
                        </li>
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen"><i class="mdi-action-settings-overscan"></i></a>
                        </li>
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button" data-activates="notifications-dropdown"><i class="mdi-social-notifications"><small class="notification-badge">5</small></i>

                        </a>
                        </li>
                        <li><a href="#" data-activates="chat-out" class="waves-effect waves-block waves-light chat-collapse"><i class="mdi-communication-chat"></i></a>
                        </li>
                    </ul>
                    <!-- translation-button -->
                    <ul id="translation-dropdown" class="dropdown-content">
                      <li>
                        <a href="#!"><img src="images/flag-icons/United-States.png" alt="English" />  <span class="language-select">English</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/France.png" alt="French" />  <span class="language-select">French</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/China.png" alt="Chinese" />  <span class="language-select">Chinese</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/Germany.png" alt="German" />  <span class="language-select">German</span></a>
                      </li>

                    </ul>
                    <!-- notifications-dropdown -->
                    <ul id="notifications-dropdown" class="dropdown-content">
                      <li>
                        <h5>NOTIFICATIONS <span class="new badge">5</span></h5>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="#!"><i class="mdi-action-add-shopping-cart"></i> A new order has been placed!</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-stars"></i> Completed the task</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-settings"></i> Settings updated</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-editor-insert-invitation"></i> Director meeting started</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-trending-up"></i> Generate monthly report</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
                      </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- end header nav-->
  </header>
  <!-- END HEADER -->

  <!-- //////////////////////////////////////////////////////////////////////////// -->

  <!-- START MAIN -->
  <div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">

      <!-- START LEFT SIDEBAR NAV-->
      <aside id="left-sidebar-nav">
        <ul id="slide-out" class="side-nav fixed leftside-navigation">
            <li class="user-details cyan darken-2">
            <div class="row">
                <div class="col col s4 m4 l4">
                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                </div>
                <div class="col col s8 m8 l8">
                    <ul id="profile-dropdown" class="dropdown-content">
                        <li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
                        </li>
                        <li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
                        </li>
                        <li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
                        </li>
                        <li><a href="#"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
                        </li>
                    </ul>
                    <a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
                    <p class="user-roal">Administrator</p>
                </div>
            </div>
            </li>
            <li class="bold"><a href="index.html" class="waves-effect waves-cyan"><i class="mdi-action-dashboard"></i> Dashboard</a>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-view-carousel"></i> Layouts</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="layout-fullscreen.html">Full Screen</a>
                                </li>
                                <li><a href="layout-horizontal-menu.html">Horizontal Menu</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="bold"><a href="app-email.html" class="waves-effect waves-cyan"><i class="mdi-communication-email"></i> Mailbox <span class="new badge">4</span></a>
            </li>
            <li class="bold"><a href="app-calendar.html" class="waves-effect waves-cyan"><i class="mdi-editor-insert-invitation"></i> Calender</a>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan active"><i class="mdi-action-invert-colors"></i> CSS</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="css-typography.html">Typography</a>
                                </li>
                                <li><a href="css-icons.html">Icons</a>
                                </li>
                                <li class="active"><a href="css-animations.html">Animations</a>
                                </li>
                                <li><a href="css-shadow.html">Shadow</a>
                                </li>
                                <li><a href="css-media.html">Media</a>
                                </li>
                                <li><a href="css-sass.html">Sass</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-palette"></i> UI Elements</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="ui-alerts.html">Alerts</a>
                                </li>
                                <li><a href="ui-buttons.html">Buttons</a>
                                </li>
                                <li><a href="ui-badges.html">Badges</a>
                                </li>
                                <li><a href="ui-breadcrumbs.html">Breadcrumbs</a>
                                </li>
                                <li><a href="ui-collections.html">Collections</a>
                                </li>
                                <li><a href="ui-collapsibles.html">Collapsibles</a>
                                </li>
                                <li><a href="ui-tabs.html">Tabs</a>
                                </li>
                                <li><a href="ui-navbar.html">Navbar</a>
                                </li>
                                <li><a href="ui-pagination.html">Pagination</a>
                                </li>
                                <li><a href="ui-preloader.html">Preloader</a>
                                </li>
                                <li><a href="ui-toasts.html">Toasts</a>
                                </li>
                                <li><a href="ui-tooltip.html">Tooltip</a>
                                </li>
                                <li><a href="ui-waves.html">Waves</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-av-queue"></i> Advanced UI <span class="new badge"></span></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="advanced-ui-chips.html">Chips</a>
                                </li>
                                <li><a href="advanced-ui-cards.html">Cards</a>
                                </li>
                                <li><a href="advanced-ui-modals.html">Modals</a>
                                </li>
                                <li><a href="advanced-ui-media.html">Media</a>
                                </li>
                                <li><a href="advanced-ui-range-slider.html">Range Slider</a>
                                </li>
                                <li><a href="advanced-ui-sweetalert.html">SweetAlert</a>
                                </li>
                                <li><a href="advanced-ui-nestable.html">Shortable & Nestable</a>
                                </li>
                                <li><a href="advanced-ui-translation.html">Language Translation</a>
                                </li>
                                <li><a href="advanced-ui-highlight.html">Highlight</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a href="app-widget.html" class="waves-effect waves-cyan"><i class="mdi-device-now-widgets"></i> Widgets</a>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-border-all"></i> Tables</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="table-basic.html">Basic Tables</a>
                                </li>
                                <li><a href="table-data.html">Data Tables</a>
                                </li>
                                <li><a href="table-jsgrid.html">jsGrid</a>
                                </li>
                                <li><a href="table-editable.html">Editable Table</a>
                                </li>
                                <li><a href="table-floatThead.html">floatThead</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-insert-comment"></i> Forms <span class="new badge"></span></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="form-elements.html">Form Elements</a>
                                </li>
                                <li><a href="form-layouts.html">Form Layouts</a>
                                </li>
                                <li><a href="form-validation.html">Form Validations</a>
                                </li>
                                <li><a href="form-masks.html">Form Masks</a>
                                </li>
                                <li><a href="form-file-uploads.html">File Uploads</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-social-pages"></i> Pages</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="page-contact.html">Contact Page</a>
                                </li>
                                <li><a href="page-todo.html">ToDos</a>
                                </li>
                                <li><a href="page-blog-1.html">Blog Type 1</a>
                                </li>
                                <li><a href="page-blog-2.html">Blog Type 2</a>
                                </li>
                                <li><a href="page-404.html">404</a>
                                </li>
                                <li><a href="page-500.html">500</a>
                                </li>
                                <li><a href="page-blank.html">Blank</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-action-shopping-cart"></i> eCommers</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="eCommerce-products-page.html">Products Page</a>
                                </li>
                                <li><a href="eCommerce-pricing.html">Pricing Table</a>
                                </li>
                                <li><a href="eCommerce-invoice.html">Invoice</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-image"></i> Medias</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="media-gallary-page.html">Gallery Page</a>
                                </li>
                                <li><a href="media-hover-effects.html">Image Hover Effects</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-action-account-circle"></i> User</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="user-profile-page.html">User Profile</a>
                                </li>
                                <li><a href="user-login.html">Login</a>
                                </li>
                                <li><a href="user-register.html">Register</a>
                                </li>
                                <li><a href="user-forgot-password.html">Forgot Password</a>
                                </li>
                                <li><a href="user-lock-screen.html">Lock Screen</a>
                                </li>

                            </ul>
                        </div>
                    </li>

                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-insert-chart"></i> Charts</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="charts-chartjs.html">Chart JS</a>
                                </li>
                                <li><a href="charts-chartist.html">Chartist</a>
                                </li>
                                <li><a href="charts-morris.html">Morris Charts</a>
                                </li>
                                <li><a href="charts-xcharts.html">xCharts</a>
                                </li>
                                <li><a href="charts-flotcharts.html">Flot Charts</a>
                                </li>
                                <li><a href="charts-sparklines.html">Sparkline Charts</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="li-hover"><div class="divider"></div></li>
            <li class="li-hover"><p class="ultra-small margin more-text">MORE</p></li>
            <li><a href="angular-ui.html"><i class="mdi-action-verified-user"></i> Angular UI  <span class="new badge"></span></a>
            </li>
            <li><a href="css-grid.html"><i class="mdi-image-grid-on"></i> Grid</a>
            </li>
            <li><a href="css-color.html"><i class="mdi-editor-format-color-fill"></i> Color</a>
            </li>
            <li><a href="css-helpers.html"><i class="mdi-communication-live-help"></i> Helpers</a>
            </li>
            <li><a href="changelogs.html"><i class="mdi-action-swap-vert-circle"></i> Changelogs</a>
            </li>
            <li class="li-hover"><div class="divider"></div></li>
            <li class="li-hover"><p class="ultra-small margin more-text">Daily Sales</p></li>
            <li class="li-hover">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="sample-chart-wrapper">
                            <div class="ct-chart ct-golden-section" id="ct2-chart"></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <a href="#" data-activates="slide-out" class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i class="mdi-navigation-menu"></i></a>
        </aside>
      <!-- END LEFT SIDEBAR NAV-->

      <!-- //////////////////////////////////////////////////////////////////////////// -->

      <!-- START CONTENT -->
      <section id="content">

        <!--breadcrumbs start-->
        <div id="breadcrumbs-wrapper">
            <!-- Search for small screen -->
            <div class="header-search-wrapper grey hide-on-large-only">
                <i class="mdi-action-search active"></i>
                <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize">
            </div>
          <div class="container">
            <div class="row">
              <div class="col s12 m12 l12">
                <h5 class="breadcrumbs-title">Icons</h5>
                <ol class="breadcrumbs">
                    <li><a href="index.html">Dashboard</a></li>
                    <li><a href="#">CSS</a></li>
                    <li class="active">Icons</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!--breadcrumbs end-->


        <!--start container-->
        <div class="container">
            <div class="section">
            <p class="caption">We have included 740 Material Design Icons courtesy of Google. You can download them directly from the <a href="https://github.com/google/material-design-icons">Material Design specs</a>. The icon font was made and packed by <a href="http://fezvrasta.github.io/bootstrap-material-design/">Bootstrap Material Design</a>.</p>
                <div class="divider"></div>
                <!--Icon Sizes-->
                <div class="col s12 m12 l12">
                <div id="icon-sizes" class="section">

                    <h4 class="header">Sizes</h4>
                    <div class="col s12 m4 l3">
                      <p>To control the size of the icon, change the <code class=" language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 30px</code> property of your icon. Optionally you can use preset classes
                        as shown below.</p>
                    </div>
                    <div class="col s12 m8 l9">
                      <div class="card-panel">
                        <div class="row">
                          <div class="center-align">
                            <div class="col s3"><i class="mdi-editor-insert-chart tiny icon-demo"></i>
                              <br>
                              <p>Tiny</p>
                            </div>
                            <div class="col s3"><i class="mdi-editor-insert-chart small icon-demo"></i>
                              <br>
                              <p>Small</p>
                            </div>
                            <div class="col s3"><i class="mdi-editor-insert-chart medium icon-demo"></i>
                              <br>
                              <p>Medium</p>
                            </div>
                            <div class="col s3"><i class="mdi-editor-insert-chart large icon-demo"></i>
                              <br>
                              <p>Large</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                </div>

                <!-- Icon Listing -->
                <div class="divider"></div>
                <!--action-icons-->
                <div id="action" class="row icon-container section">
                  <div class="col s12 m12 l12">
                  <h4 class="header">Action</h4>
                  </div>
                  <br>

                  <div class="icon-preview col s6 m3"><i class="mdi-action-3d-rotation"></i><span>mdi-action-3d-rotation</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-accessibility"></i><span>mdi-action-accessibility</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-account-balance"></i><span>mdi-action-account-balance</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-account-balance-wallet"></i><span>mdi-action-account-balance-wallet</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-account-box"></i><span>mdi-action-account-box</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-account-child"></i><span>mdi-action-account-child</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-account-circle"></i><span>mdi-action-account-circle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-add-shopping-cart"></i><span>mdi-action-add-shopping-cart</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-alarm"></i><span>mdi-action-alarm</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-alarm-add"></i><span>mdi-action-alarm-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-alarm-off"></i><span>mdi-action-alarm-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-stars"></i><span>mdi-action-alarm-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-android"></i><span>mdi-action-android</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-announcement"></i><span>mdi-action-announcement</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-aspect-ratio"></i><span>mdi-action-aspect-ratio</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assessment"></i><span>mdi-action-assessment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assignment"></i><span>mdi-action-assignment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assignment-ind"></i><span>mdi-action-assignment-ind</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assignment-late"></i><span>mdi-action-assignment-late</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assignment-return"></i><span>mdi-action-assignment-return</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assignment-returned"></i><span>mdi-action-assignment-returned</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-assignment-turned-in"></i><span>mdi-action-assignment-turned-in</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-autorenew"></i><span>mdi-action-autorenew</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-backup"></i><span>mdi-action-backup</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-book"></i><span>mdi-action-book</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-bookmark"></i><span>mdi-action-bookmark</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-stars"></i><span>mdi-action-bookmark-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-bug-report"></i><span>mdi-action-bug-report</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-cached"></i><span>mdi-action-cached</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-class"></i><span>mdi-action-class</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-credit-card"></i><span>mdi-action-credit-card</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-dashboard"></i><span>mdi-action-dashboard</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-delete"></i><span>mdi-action-delete</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-description"></i><span>mdi-action-description</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-dns"></i><span>mdi-action-dns</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-done"></i><span>mdi-action-done</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-stars"></i><span>mdi-action-done-all</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-event"></i><span>mdi-action-event</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-exit-to-app"></i><span>mdi-action-exit-to-app</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-explore"></i><span>mdi-action-explore</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-extension"></i><span>mdi-action-extension</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-face-unlock"></i><span>mdi-action-face-unlock</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-favorite"></i><span>mdi-action-favorite</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-favorite-outline"></i><span>mdi-action-favorite-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-find-in-page"></i><span>mdi-action-find-in-page</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-find-replace"></i><span>mdi-action-find-replace</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-flip-to-back"></i><span>mdi-action-flip-to-back</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-flip-to-front"></i><span>mdi-action-flip-to-front</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-get-app"></i><span>mdi-action-get-app</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-grade"></i><span>mdi-action-grade</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-group-work"></i><span>mdi-action-group-work</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-help"></i><span>mdi-action-help</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-highlight-remove"></i><span>mdi-action-highlight-remove</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-history"></i><span>mdi-action-history</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-home"></i><span>mdi-action-home</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-https"></i><span>mdi-action-https</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-info"></i><span>mdi-action-info</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-info-outline"></i><span>mdi-action-info-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-input"></i><span>mdi-action-input</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-invert-colors"></i><span>mdi-action-invert-colors</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-label"></i><span>mdi-action-label</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-label-outline"></i><span>mdi-action-label-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-language"></i><span>mdi-action-language</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-launch"></i><span>mdi-action-launch</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-list"></i><span>mdi-action-list</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-lock"></i><span>mdi-action-lock</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-lock-open"></i><span>mdi-action-lock-open</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-lock-outline"></i><span>mdi-action-lock-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-loyalty"></i><span>mdi-action-loyalty</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-markunread-mailbox"></i><span>mdi-action-markunread-mailbox</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-note-add"></i><span>mdi-action-note-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-open-in-browser"></i><span>mdi-action-open-in-browser</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-open-in-new"></i><span>mdi-action-open-in-new</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-open-with"></i><span>mdi-action-open-with</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-pageview"></i><span>mdi-action-pageview</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-payment"></i><span>mdi-action-payment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-camera-mic"></i><span>mdi-action-perm-camera-mic</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-contact-cal"></i><span>mdi-action-perm-contact-cal</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-data-setting"></i><span>mdi-action-perm-data-setting</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-device-info"></i><span>mdi-action-perm-device-info</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-identity"></i><span>mdi-action-perm-identity</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-media"></i><span>mdi-action-perm-media</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-phone-msg"></i><span>mdi-action-perm-phone-msg</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-perm-scan-wifi"></i><span>mdi-action-perm-scan-wifi</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-picture-in-picture"></i><span>mdi-action-picture-in-picture</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-polymer"></i><span>mdi-action-polymer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-print"></i><span>mdi-action-print</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-query-builder"></i><span>mdi-action-query-builder</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-question-answer"></i><span>mdi-action-question-answer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-receipt"></i><span>mdi-action-receipt</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-redeem"></i><span>mdi-action-redeem</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-report-problem"></i><span>mdi-action-report-problem</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-restore"></i><span>mdi-action-restore</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-room"></i><span>mdi-action-room</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-schedule"></i><span>mdi-action-schedule</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-search"></i><span>mdi-action-search</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings"></i><span>mdi-action-settings</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-applications"></i><span>mdi-action-settings-applications</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-backup-restore"></i><span>mdi-action-settings-backup-restore</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-bluetooth"></i><span>mdi-action-settings-bluetooth</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-cell"></i><span>mdi-action-settings-cell</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-display"></i><span>mdi-action-settings-display</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-ethernet"></i><span>mdi-action-settings-ethernet</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-input-antenna"></i><span>mdi-action-settings-input-antenna</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-input-component"></i><span>mdi-action-settings-input-component</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-input-composite"></i><span>mdi-action-settings-input-composite</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-input-hdmi"></i><span>mdi-action-settings-input-hdmi</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-input-svideo"></i><span>mdi-action-settings-input-svideo</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-overscan"></i><span>mdi-action-settings-overscan</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-phone"></i><span>mdi-action-settings-phone</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-power"></i><span>mdi-action-settings-power</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-remote"></i><span>mdi-action-settings-remote</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-settings-voice"></i><span>mdi-action-settings-voice</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-shop"></i><span>mdi-action-shop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-shop-two"></i><span>mdi-action-shop-two</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-shopping-basket"></i><span>mdi-action-shopping-basket</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-shopping-cart"></i><span>mdi-action-shopping-cart</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-speaker-notes"></i><span>mdi-action-speaker-notes</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-spellcheck"></i><span>mdi-action-spellcheck</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-star-rate"></i><span>mdi-action-star-rate</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-stars"></i><span>mdi-action-stars</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-store"></i><span>mdi-action-store</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-subject"></i><span>mdi-action-subject</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-swap-horiz"></i><span>mdi-action-swap-horiz</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-swap-vert"></i><span>mdi-action-swap-vert</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-swap-vert-circle"></i><span>mdi-action-swap-vert-circle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-system-update-tv"></i><span>mdi-action-system-update-tv</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-tab"></i><span>mdi-action-tab</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-tab-unselected"></i><span>mdi-action-tab-unselected</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-theaters"></i><span>mdi-action-theaters</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-thumb-down"></i><span>mdi-action-thumb-down</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-thumb-up"></i><span>mdi-action-thumb-up</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-thumbs-up-down"></i><span>mdi-action-thumbs-up-down</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-toc"></i><span>mdi-action-toc</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-today"></i><span>mdi-action-today</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-track-changes"></i><span>mdi-action-track-changes</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-translate"></i><span>mdi-action-translate</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-trending-down"></i><span>mdi-action-trending-down</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-trending-neutral"></i><span>mdi-action-trending-neutral</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-trending-up"></i><span>mdi-action-trending-up</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-turned-in"></i><span>mdi-action-turned-in</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-turned-in-not"></i><span>mdi-action-turned-in-not</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-verified-user"></i><span>mdi-action-verified-user</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-agenda"></i><span>mdi-action-view-agenda</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-array"></i><span>mdi-action-view-array</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-carousel"></i><span>mdi-action-view-carousel</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-column"></i><span>mdi-action-view-column</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-day"></i><span>mdi-action-view-day</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-headline"></i><span>mdi-action-view-headline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-list"></i><span>mdi-action-view-list</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-module"></i><span>mdi-action-view-module</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-quilt"></i><span>mdi-action-view-quilt</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-stream"></i><span>mdi-action-view-stream</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-view-week"></i><span>mdi-action-view-week</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-visibility"></i><span>mdi-action-visibility</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-visibility-off"></i><span>mdi-action-visibility-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-wallet-giftcard"></i><span>mdi-action-wallet-giftcard</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-wallet-membership"></i><span>mdi-action-wallet-membership</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-wallet-travel"></i><span>mdi-action-wallet-travel</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-work"></i><span>mdi-action-work</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--alert-icons-->
                <div id="alert" class="row icon-container section">

                  <div class="col s12 m12 l12"><h4 class="header">Alert</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-alert-error"></i><span>mdi-alert-error</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-alert-warning"></i><span>mdi-alert-warning</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--av-icons-->
                <div id="av" class="row icon-container section">

                  <div class="col s12 m12 l12"><h4 class="header">AV</h4></div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-album"></i><span>mdi-av-album</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-timer"></i><span>mdi-av-timer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-closed-caption"></i><span>mdi-av-closed-caption</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-equalizer"></i><span>mdi-av-equalizer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-explicit"></i><span>mdi-av-explicit</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-fast-forward"></i><span>mdi-av-fast-forward</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-fast-rewind"></i><span>mdi-av-fast-rewind</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-games"></i><span>mdi-av-games</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-hearing"></i><span>mdi-av-hearing</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-high-quality"></i><span>mdi-av-high-quality</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-loop"></i><span>mdi-av-loop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-mic"></i><span>mdi-av-mic</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-mic-none"></i><span>mdi-av-mic-none</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-mic-off"></i><span>mdi-av-mic-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-movie"></i><span>mdi-av-movie</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-my-library-add"></i><span>mdi-av-my-library-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-my-library-books"></i><span>mdi-av-my-library-books</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-my-library-music"></i><span>mdi-av-my-library-music</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-new-releases"></i><span>mdi-av-new-releases</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-not-interested"></i><span>mdi-av-not-interested</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-pause"></i><span>mdi-av-pause</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-pause-circle-fill"></i><span>mdi-av-pause-circle-fill</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-pause-circle-outline"></i><span>mdi-av-pause-circle-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-play-arrow"></i><span>mdi-av-play-arrow</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-play-circle-fill"></i><span>mdi-av-play-circle-fill</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-play-circle-outline"></i><span>mdi-av-play-circle-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-play-shopping-bag"></i><span>mdi-av-play-shopping-bag</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-playlist-add"></i><span>mdi-av-playlist-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-queue"></i><span>mdi-av-queue</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-queue-music"></i><span>mdi-av-queue-music</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-radio"></i><span>mdi-av-radio</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-recent-actors"></i><span>mdi-av-recent-actors</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-repeat"></i><span>mdi-av-repeat</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-repeat-one"></i><span>mdi-av-repeat-one</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-replay"></i><span>mdi-av-replay</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-shuffle"></i><span>mdi-av-shuffle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-skip-next"></i><span>mdi-av-skip-next</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-skip-previous"></i><span>mdi-av-skip-previous</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-snooze"></i><span>mdi-av-snooze</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-stop"></i><span>mdi-av-stop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-subtitles"></i><span>mdi-av-subtitles</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-surround-sound"></i><span>mdi-av-surround-sound</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-video-collection"></i><span>mdi-av-video-collection</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-videocam"></i><span>mdi-av-videocam</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-videocam-off"></i><span>mdi-av-videocam-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-volume-down"></i><span>mdi-av-volume-down</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-volume-mute"></i><span>mdi-av-volume-mute</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-volume-off"></i><span>mdi-av-volume-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-volume-up"></i><span>mdi-av-volume-up</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-av-web"></i><span>mdi-av-web</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--communication-icons-->
                <div id="communication" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Communication</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-communication-business"></i><span>mdi-communication-business</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call"></i><span>mdi-communication-call</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call-end"></i><span>mdi-communication-call-end</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call-made"></i><span>mdi-communication-call-made</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call-merge"></i><span>mdi-communication-call-merge</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call-missed"></i><span>mdi-communication-call-missed</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call-received"></i><span>mdi-communication-call-received</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-call-split"></i><span>mdi-communication-call-split</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-chat"></i><span>mdi-communication-chat</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-clear-all"></i><span>mdi-communication-clear-all</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-comment"></i><span>mdi-communication-comment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-contacts"></i><span>mdi-communication-contacts</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-dialer-sip"></i><span>mdi-communication-dialer-sip</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-dialpad"></i><span>mdi-communication-dialpad</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-dnd-on"></i><span>mdi-communication-dnd-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-email"></i><span>mdi-communication-email</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-forum"></i><span>mdi-communication-forum</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-import-export"></i><span>mdi-communication-import-export</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-invert-colors-off"></i><span>mdi-communication-invert-colors-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-invert-colors-on"></i><span>mdi-communication-invert-colors-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-live-help"></i><span>mdi-communication-live-help</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-location-off"></i><span>mdi-communication-location-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-location-on"></i><span>mdi-communication-location-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-message"></i><span>mdi-communication-message</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-messenger"></i><span>mdi-communication-messenger</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-no-sim"></i><span>mdi-communication-no-sim</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-phone"></i><span>mdi-communication-phone</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-portable-wifi-off"></i><span>mdi-communication-portable-wifi-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-quick-contacts-dialer"></i><span>mdi-communication-quick-contacts-dialer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-quick-contacts-mail"></i><span>mdi-communication-quick-contacts-mail</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-ring-volume"></i><span>mdi-communication-ring-volume</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-stay-current-landscape"></i><span>mdi-communication-stay-current-landscape</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-stay-current-portrait"></i><span>mdi-communication-stay-current-portrait</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-stay-primary-landscape"></i><span>mdi-communication-stay-primary-landscape</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-stay-primary-portrait"></i><span>mdi-communication-stay-primary-portrait</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-swap-calls"></i><span>mdi-communication-swap-calls</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-textsms"></i><span>mdi-communication-textsms</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-voicemail"></i><span>mdi-communication-voicemail</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-communication-vpn-key"></i><span>mdi-communication-vpn-key</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--content-icons-->
                <div id="content-icons" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Content</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-content-add"></i><span>mdi-content-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-add-box"></i><span>mdi-content-add-box</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-add-circle"></i><span>mdi-content-add-circle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-add-circle-outline"></i><span>mdi-content-add-circle-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-archive"></i><span>mdi-content-archive</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-backspace"></i><span>mdi-content-backspace</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-block"></i><span>mdi-content-block</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-clear"></i><span>mdi-content-clear</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-content-copy"></i><span>mdi-content-content-copy</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-content-cut"></i><span>mdi-content-content-cut</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-content-paste"></i><span>mdi-content-content-paste</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-create"></i><span>mdi-content-create</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-drafts"></i><span>mdi-content-drafts</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-filter-list"></i><span>mdi-content-filter-list</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-flag"></i><span>mdi-content-flag</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-forward"></i><span>mdi-content-forward</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-gesture"></i><span>mdi-content-gesture</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-inbox"></i><span>mdi-content-inbox</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-action-stars"></i><span>mdi-content-link</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-mail"></i><span>mdi-content-mail</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-markunread"></i><span>mdi-content-markunread</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-redo"></i><span>mdi-content-redo</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-remove"></i><span>mdi-content-remove</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-remove-circle"></i><span>mdi-content-remove-circle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-remove-circle-outline"></i><span>mdi-content-remove-circle-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-reply"></i><span>mdi-content-reply</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-reply-all"></i><span>mdi-content-reply-all</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-report"></i><span>mdi-content-report</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-save"></i><span>mdi-content-save</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-select-all"></i><span>mdi-content-select-all</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-send"></i><span>mdi-content-send</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-sort"></i><span>mdi-content-sort</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-text-format"></i><span>mdi-content-text-format</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-content-undo"></i><span>mdi-content-undo</span>
                  </div>
                </div>
                <div class="divider"></div>
                <div class="divider"></div>
                <!--editor-icons-->
                <div id="editor" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Editor</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-editor-attach-file"></i><span>mdi-editor-attach-file</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-attach-money"></i><span>mdi-editor-attach-money</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-all"></i><span>mdi-editor-border-all</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-bottom"></i><span>mdi-editor-border-bottom</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-clear"></i><span>mdi-editor-border-clear</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-color"></i><span>mdi-editor-border-color</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-horizontal"></i><span>mdi-editor-border-horizontal</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-inner"></i><span>mdi-editor-border-inner</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-left"></i><span>mdi-editor-border-left</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-outer"></i><span>mdi-editor-border-outer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-right"></i><span>mdi-editor-border-right</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-style"></i><span>mdi-editor-border-style</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-top"></i><span>mdi-editor-border-top</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-border-vertical"></i><span>mdi-editor-border-vertical</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-align-center"></i><span>mdi-editor-format-align-center</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-align-justify"></i><span>mdi-editor-format-align-justify</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-align-left"></i><span>mdi-editor-format-align-left</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-align-right"></i><span>mdi-editor-format-align-right</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-bold"></i><span>mdi-editor-format-bold</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-clear"></i><span>mdi-editor-format-clear</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-color-fill"></i><span>mdi-editor-format-color-fill</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-color-reset"></i><span>mdi-editor-format-color-reset</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-color-text"></i><span>mdi-editor-format-color-text</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-indent-decrease"></i><span>mdi-editor-format-indent-decrease</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-indent-increase"></i><span>mdi-editor-format-indent-increase</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-italic"></i><span>mdi-editor-format-italic</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-line-spacing"></i><span>mdi-editor-format-line-spacing</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-list-bulleted"></i><span>mdi-editor-format-list-bulleted</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-list-numbered"></i><span>mdi-editor-format-list-numbered</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-paint"></i><span>mdi-editor-format-paint</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-quote"></i><span>mdi-editor-format-quote</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-size"></i><span>mdi-editor-format-size</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-strikethrough"></i><span>mdi-editor-format-strikethrough</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-textdirection-l-to-r"></i><span>mdi-editor-format-textdirection-l-to-r</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-textdirection-r-to-l"></i><span>mdi-editor-format-textdirection-r-to-l</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-format-underline"></i><span>mdi-editor-format-underline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-functions"></i><span>mdi-editor-functions</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-chart"></i><span>mdi-editor-insert-chart</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-comment"></i><span>mdi-editor-insert-comment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-drive-file"></i><span>mdi-editor-insert-drive-file</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-emoticon"></i><span>mdi-editor-insert-emoticon</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-invitation"></i><span>mdi-editor-insert-invitation</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-link"></i><span>mdi-editor-insert-link</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-insert-photo"></i><span>mdi-editor-insert-photo</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-merge-type"></i><span>mdi-editor-merge-type</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-mode-comment"></i><span>mdi-editor-mode-comment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-mode-edit"></i><span>mdi-editor-mode-edit</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-publish"></i><span>mdi-editor-publish</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-vertical-align-bottom"></i><span>mdi-editor-vertical-align-bottom</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-vertical-align-center"></i><span>mdi-editor-vertical-align-center</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-vertical-align-top"></i><span>mdi-editor-vertical-align-top</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-editor-wrap-text"></i><span>mdi-editor-wrap-text</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--file-icons-->
                <div id="file" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">File</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-file-attachment"></i><span>mdi-file-attachment</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud"></i><span>mdi-file-cloud</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud-circle"></i><span>mdi-file-cloud-circle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud-done"></i><span>mdi-file-cloud-done</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud-download"></i><span>mdi-file-cloud-download</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud-off"></i><span>mdi-file-cloud-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud-queue"></i><span>mdi-file-cloud-queue</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-cloud-upload"></i><span>mdi-file-cloud-upload</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-file-download"></i><span>mdi-file-file-download</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-file-upload"></i><span>mdi-file-file-upload</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-folder"></i><span>mdi-file-folder</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-folder-open"></i><span>mdi-file-folder-open</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-file-folder-shared"></i><span>mdi-file-folder-shared</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--hardware-icons-->
                <div id="hardware" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Hardware</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-cast"></i><span>mdi-hardware-cast</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-cast-connected"></i><span>mdi-hardware-cast-connected</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-computer"></i><span>mdi-hardware-computer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-desktop-mac"></i><span>mdi-hardware-desktop-mac</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-desktop-windows"></i><span>mdi-hardware-desktop-windows</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-dock"></i><span>mdi-hardware-dock</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-gamepad"></i><span>mdi-hardware-gamepad</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-headset"></i><span>mdi-hardware-headset</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-headset-mic"></i><span>mdi-hardware-headset-mic</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard"></i><span>mdi-hardware-keyboard</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-alt"></i><span>mdi-hardware-keyboard-alt</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-arrow-down"></i><span>mdi-hardware-keyboard-arrow-down</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-arrow-left"></i><span>mdi-hardware-keyboard-arrow-left</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-arrow-right"></i><span>mdi-hardware-keyboard-arrow-right</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-arrow-up"></i><span>mdi-hardware-keyboard-arrow-up</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-backspace"></i><span>mdi-hardware-keyboard-backspace</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-capslock"></i><span>mdi-hardware-keyboard-capslock</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-control"></i><span>mdi-hardware-keyboard-control</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-hide"></i><span>mdi-hardware-keyboard-hide</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-return"></i><span>mdi-hardware-keyboard-return</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-tab"></i><span>mdi-hardware-keyboard-tab</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-keyboard-voice"></i><span>mdi-hardware-keyboard-voice</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-laptop"></i><span>mdi-hardware-laptop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-laptop-chromebook"></i><span>mdi-hardware-laptop-chromebook</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-laptop-mac"></i><span>mdi-hardware-laptop-mac</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-laptop-windows"></i><span>mdi-hardware-laptop-windows</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-memory"></i><span>mdi-hardware-memory</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-mouse"></i><span>mdi-hardware-mouse</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-phone-android"></i><span>mdi-hardware-phone-android</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-phone-iphone"></i><span>mdi-hardware-phone-iphone</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-phonelink"></i><span>mdi-hardware-phonelink</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-phonelink-off"></i><span>mdi-hardware-phonelink-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-security"></i><span>mdi-hardware-security</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-sim-card"></i><span>mdi-hardware-sim-card</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-smartphone"></i><span>mdi-hardware-smartphone</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-speaker"></i><span>mdi-hardware-speaker</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-tablet"></i><span>mdi-hardware-tablet</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-tablet-android"></i><span>mdi-hardware-tablet-android</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-tablet-mac"></i><span>mdi-hardware-tablet-mac</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-tv"></i><span>mdi-hardware-tv</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-hardware-watch"></i><span>mdi-hardware-watch</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--image-icons-->
                <div id="image" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Image</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-image-add-to-photos"></i><span>mdi-image-add-to-photos</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-adjust"></i><span>mdi-image-adjust</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-assistant-photo"></i><span>mdi-image-assistant-photo</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-audiotrack"></i><span>mdi-image-audiotrack</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-blur-circular"></i><span>mdi-image-blur-circular</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-blur-linear"></i><span>mdi-image-blur-linear</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-blur-off"></i><span>mdi-image-blur-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-blur-on"></i><span>mdi-image-blur-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-1"></i><span>mdi-image-brightness-1</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-2"></i><span>mdi-image-brightness-2</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-3"></i><span>mdi-image-brightness-3</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-4"></i><span>mdi-image-brightness-4</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-5"></i><span>mdi-image-brightness-5</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-6"></i><span>mdi-image-brightness-6</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brightness-7"></i><span>mdi-image-brightness-7</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-brush"></i><span>mdi-image-brush</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-camera"></i><span>mdi-image-camera</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-camera-alt"></i><span>mdi-image-camera-alt</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-camera-front"></i><span>mdi-image-camera-front</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-camera-rear"></i><span>mdi-image-camera-rear</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-camera-roll"></i><span>mdi-image-camera-roll</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-center-focus-strong"></i><span>mdi-image-center-focus-strong</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-center-focus-weak"></i><span>mdi-image-center-focus-weak</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-collections"></i><span>mdi-image-collections</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-color-lens"></i><span>mdi-image-color-lens</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-colorize"></i><span>mdi-image-colorize</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-compare"></i><span>mdi-image-compare</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-control-point"></i><span>mdi-image-control-point</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-control-point-duplicate"></i><span>mdi-image-control-point-duplicate</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-16-9"></i><span>mdi-image-crop-16-9</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop"></i><span>mdi-image-crop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-3-2"></i><span>mdi-image-crop-3-2</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-5-4"></i><span>mdi-image-crop-5-4</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-7-5"></i><span>mdi-image-crop-7-5</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-din"></i><span>mdi-image-crop-din</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-free"></i><span>mdi-image-crop-free</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-landscape"></i><span>mdi-image-crop-landscape</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-original"></i><span>mdi-image-crop-original</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-portrait"></i><span>mdi-image-crop-portrait</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-crop-square"></i><span>mdi-image-crop-square</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-dehaze"></i><span>mdi-image-dehaze</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-details"></i><span>mdi-image-details</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-edit"></i><span>mdi-image-edit</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-exposure"></i><span>mdi-image-exposure</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-exposure-minus-1"></i><span>mdi-image-exposure-minus-1</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-exposure-minus-2"></i><span>mdi-image-exposure-minus-2</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-exposure-plus-1"></i><span>mdi-image-exposure-plus-1</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-exposure-plus-2"></i><span>mdi-image-exposure-plus-2</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-exposure-zero"></i><span>mdi-image-exposure-zero</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-1"></i><span>mdi-image-filter-1</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter"></i><span>mdi-image-filter</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-2"></i><span>mdi-image-filter-2</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-3"></i><span>mdi-image-filter-3</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-4"></i><span>mdi-image-filter-4</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-5"></i><span>mdi-image-filter-5</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-6"></i><span>mdi-image-filter-6</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-7"></i><span>mdi-image-filter-7</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-8"></i><span>mdi-image-filter-8</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-9"></i><span>mdi-image-filter-9</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-9-plus"></i><span>mdi-image-filter-9-plus</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-b-and-w"></i><span>mdi-image-filter-b-and-w</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-center-focus"></i><span>mdi-image-filter-center-focus</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-drama"></i><span>mdi-image-filter-drama</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-frames"></i><span>mdi-image-filter-frames</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-hdr"></i><span>mdi-image-filter-hdr</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-none"></i><span>mdi-image-filter-none</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-tilt-shift"></i><span>mdi-image-filter-tilt-shift</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-filter-vintage"></i><span>mdi-image-filter-vintage</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-flare"></i><span>mdi-image-flare</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-flash-auto"></i><span>mdi-image-flash-auto</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-flash-off"></i><span>mdi-image-flash-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-flash-on"></i><span>mdi-image-flash-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-flip"></i><span>mdi-image-flip</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-gradient"></i><span>mdi-image-gradient</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-grain"></i><span>mdi-image-grain</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-grid-off"></i><span>mdi-image-grid-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-grid-on"></i><span>mdi-image-grid-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-hdr-off"></i><span>mdi-image-hdr-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-hdr-on"></i><span>mdi-image-hdr-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-hdr-strong"></i><span>mdi-image-hdr-strong</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-hdr-weak"></i><span>mdi-image-hdr-weak</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-healing"></i><span>mdi-image-healing</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-image"></i><span>mdi-image-image</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-image-aspect-ratio"></i><span>mdi-image-image-aspect-ratio</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-iso"></i><span>mdi-image-iso</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-landscape"></i><span>mdi-image-landscape</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-leak-add"></i><span>mdi-image-leak-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-leak-remove"></i><span>mdi-image-leak-remove</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-lens"></i><span>mdi-image-lens</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks"></i><span>mdi-image-looks</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks-3"></i><span>mdi-image-looks-3</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks-4"></i><span>mdi-image-looks-4</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks-5"></i><span>mdi-image-looks-5</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks-6"></i><span>mdi-image-looks-6</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks-one"></i><span>mdi-image-looks-one</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-looks-two"></i><span>mdi-image-looks-two</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-loupe"></i><span>mdi-image-loupe</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-movie-creation"></i><span>mdi-image-movie-creation</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-nature"></i><span>mdi-image-nature</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-nature-people"></i><span>mdi-image-nature-people</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-navigate-before"></i><span>mdi-image-navigate-before</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-navigate-next"></i><span>mdi-image-navigate-next</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-palette"></i><span>mdi-image-palette</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-panorama"></i><span>mdi-image-panorama</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-panorama-fisheye"></i><span>mdi-image-panorama-fisheye</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-panorama-horizontal"></i><span>mdi-image-panorama-horizontal</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-panorama-vertical"></i><span>mdi-image-panorama-vertical</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-panorama-wide-angle"></i><span>mdi-image-panorama-wide-angle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-photo"></i><span>mdi-image-photo</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-photo-album"></i><span>mdi-image-photo-album</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-photo-camera"></i><span>mdi-image-photo-camera</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-photo-library"></i><span>mdi-image-photo-library</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-portrait"></i><span>mdi-image-portrait</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-remove-red-eye"></i><span>mdi-image-remove-red-eye</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-rotate-left"></i><span>mdi-image-rotate-left</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-rotate-right"></i><span>mdi-image-rotate-right</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-slideshow"></i><span>mdi-image-slideshow</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-straighten"></i><span>mdi-image-straighten</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-style"></i><span>mdi-image-style</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-switch-camera"></i><span>mdi-image-switch-camera</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-switch-video"></i><span>mdi-image-switch-video</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-tag-faces"></i><span>mdi-image-tag-faces</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-texture"></i><span>mdi-image-texture</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-timelapse"></i><span>mdi-image-timelapse</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-timer-10"></i><span>mdi-image-timer-10</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-timer"></i><span>mdi-image-timer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-timer-3"></i><span>mdi-image-timer-3</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-timer-auto"></i><span>mdi-image-timer-auto</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-timer-off"></i><span>mdi-image-timer-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-tonality"></i><span>mdi-image-tonality</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-transform"></i><span>mdi-image-transform</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-tune"></i><span>mdi-image-tune</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-wb-auto"></i><span>mdi-image-wb-auto</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-wb-cloudy"></i><span>mdi-image-wb-cloudy</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-wb-incandescent"></i><span>mdi-image-wb-incandescent</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-wb-irradescent"></i><span>mdi-image-wb-irradescent</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-image-wb-sunny"></i><span>mdi-image-wb-sunny</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--maps-icons-->
                <div id="maps" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Maps</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-maps-beenhere"></i><span>mdi-maps-beenhere</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions"></i><span>mdi-maps-directions</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-bike"></i><span>mdi-maps-directions-bike</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-bus"></i><span>mdi-maps-directions-bus</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-car"></i><span>mdi-maps-directions-car</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-ferry"></i><span>mdi-maps-directions-ferry</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-subway"></i><span>mdi-maps-directions-subway</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-train"></i><span>mdi-maps-directions-train</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-transit"></i><span>mdi-maps-directions-transit</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-directions-walk"></i><span>mdi-maps-directions-walk</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-flight"></i><span>mdi-maps-flight</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-hotel"></i><span>mdi-maps-hotel</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-layers"></i><span>mdi-maps-layers</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-layers-clear"></i><span>mdi-maps-layers-clear</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-airport"></i><span>mdi-maps-local-airport</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-atm"></i><span>mdi-maps-local-atm</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-attraction"></i><span>mdi-maps-local-attraction</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-bar"></i><span>mdi-maps-local-bar</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-cafe"></i><span>mdi-maps-local-cafe</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-car-wash"></i><span>mdi-maps-local-car-wash</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-convenience-store"></i><span>mdi-maps-local-convenience-store</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-drink"></i><span>mdi-maps-local-drink</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-florist"></i><span>mdi-maps-local-florist</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-gas-station"></i><span>mdi-maps-local-gas-station</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-grocery-store"></i><span>mdi-maps-local-grocery-store</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-hospital"></i><span>mdi-maps-local-hospital</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-hotel"></i><span>mdi-maps-local-hotel</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-laundry-service"></i><span>mdi-maps-local-laundry-service</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-library"></i><span>mdi-maps-local-library</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-mall"></i><span>mdi-maps-local-mall</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-movies"></i><span>mdi-maps-local-movies</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-offer"></i><span>mdi-maps-local-offer</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-parking"></i><span>mdi-maps-local-parking</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-pharmacy"></i><span>mdi-maps-local-pharmacy</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-phone"></i><span>mdi-maps-local-phone</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-pizza"></i><span>mdi-maps-local-pizza</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-play"></i><span>mdi-maps-local-play</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-post-office"></i><span>mdi-maps-local-post-office</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-print-shop"></i><span>mdi-maps-local-print-shop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-restaurant"></i><span>mdi-maps-local-restaurant</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-see"></i><span>mdi-maps-local-see</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-shipping"></i><span>mdi-maps-local-shipping</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-local-taxi"></i><span>mdi-maps-local-taxi</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-location-history"></i><span>mdi-maps-location-history</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-map"></i><span>mdi-maps-map</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-my-location"></i><span>mdi-maps-my-location</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-navigation"></i><span>mdi-maps-navigation</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-pin-drop"></i><span>mdi-maps-pin-drop</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-place"></i><span>mdi-maps-place</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-rate-review"></i><span>mdi-maps-rate-review</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-restaurant-menu"></i><span>mdi-maps-restaurant-menu</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-satellite"></i><span>mdi-maps-satellite</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-store-mall-directory"></i><span>mdi-maps-store-mall-directory</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-terrain"></i><span>mdi-maps-terrain</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-maps-traffic"></i><span>mdi-maps-traffic</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--navigation-icons-->
                <div id="navigation" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Navigation</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-apps"></i><span>mdi-navigation-apps</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-arrow-back"></i><span>mdi-navigation-arrow-back</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-arrow-drop-down"></i><span>mdi-navigation-arrow-drop-down</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-arrow-drop-down-circle"></i><span>mdi-navigation-arrow-drop-down-circle</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-arrow-drop-up"></i><span>mdi-navigation-arrow-drop-up</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-arrow-forward"></i><span>mdi-navigation-arrow-forward</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-cancel"></i><span>mdi-navigation-cancel</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-check"></i><span>mdi-navigation-check</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-chevron-left"></i><span>mdi-navigation-chevron-left</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-chevron-right"></i><span>mdi-navigation-chevron-right</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-close"></i><span>mdi-navigation-close</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-expand-less"></i><span>mdi-navigation-expand-less</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-expand-more"></i><span>mdi-navigation-expand-more</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-fullscreen"></i><span>mdi-navigation-fullscreen</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-fullscreen-exit"></i><span>mdi-navigation-fullscreen-exit</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-menu"></i><span>mdi-navigation-menu</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-more-horiz"></i><span>mdi-navigation-more-horiz</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-more-vert"></i><span>mdi-navigation-more-vert</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-refresh"></i><span>mdi-navigation-refresh</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-unfold-less"></i><span>mdi-navigation-unfold-less</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-navigation-unfold-more"></i><span>mdi-navigation-unfold-more</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--notifications-icons-->
                <div id="notifications" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Notifications</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-notification-adb"></i><span>mdi-notification-adb</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-bluetooth-audio"></i><span>mdi-notification-bluetooth-audio</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-disc-full"></i><span>mdi-notification-disc-full</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-dnd-forwardslash"></i><span>mdi-notification-dnd-forwardslash</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-do-not-disturb"></i><span>mdi-notification-do-not-disturb</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-drive-eta"></i><span>mdi-notification-drive-eta</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-event-available"></i><span>mdi-notification-event-available</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-event-busy"></i><span>mdi-notification-event-busy</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-event-note"></i><span>mdi-notification-event-note</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-folder-special"></i><span>mdi-notification-folder-special</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-mms"></i><span>mdi-notification-mms</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-more"></i><span>mdi-notification-more</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-network-locked"></i><span>mdi-notification-network-locked</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-phone-bluetooth-speaker"></i><span>mdi-notification-phone-bluetooth-speaker</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-phone-forwarded"></i><span>mdi-notification-phone-forwarded</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-phone-in-talk"></i><span>mdi-notification-phone-in-talk</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-phone-locked"></i><span>mdi-notification-phone-locked</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-phone-missed"></i><span>mdi-notification-phone-missed</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-phone-paused"></i><span>mdi-notification-phone-paused</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-play-download"></i><span>mdi-notification-play-download</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-play-install"></i><span>mdi-notification-play-install</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sd-card"></i><span>mdi-notification-sd-card</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sim-card-alert"></i><span>mdi-notification-sim-card-alert</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sms"></i><span>mdi-notification-sms</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sms-failed"></i><span>mdi-notification-sms-failed</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sync"></i><span>mdi-notification-sync</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sync-disabled"></i><span>mdi-notification-sync-disabled</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-sync-problem"></i><span>mdi-notification-sync-problem</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-system-update"></i><span>mdi-notification-system-update</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-tap-and-play"></i><span>mdi-notification-tap-and-play</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-time-to-leave"></i><span>mdi-notification-time-to-leave</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-vibration"></i><span>mdi-notification-vibration</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-voice-chat"></i><span>mdi-notification-voice-chat</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-notification-vpn-lock"></i><span>mdi-notification-vpn-lock</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--social-icons-->
                <div id="social" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Social</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-social-cake"></i><span>mdi-social-cake</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-domain"></i><span>mdi-social-domain</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-group"></i><span>mdi-social-group</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-group-add"></i><span>mdi-social-group-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-location-city"></i><span>mdi-social-location-city</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-mood"></i><span>mdi-social-mood</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-notifications"></i><span>mdi-social-notifications</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-notifications-none"></i><span>mdi-social-notifications-none</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-notifications-off"></i><span>mdi-social-notifications-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-notifications-on"></i><span>mdi-social-notifications-on</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-notifications-paused"></i><span>mdi-social-notifications-paused</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-pages"></i><span>mdi-social-pages</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-party-mode"></i><span>mdi-social-party-mode</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-people"></i><span>mdi-social-people</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-people-outline"></i><span>mdi-social-people-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-person"></i><span>mdi-social-person</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-person-add"></i><span>mdi-social-person-add</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-person-outline"></i><span>mdi-social-person-outline</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-plus-one"></i><span>mdi-social-plus-one</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-poll"></i><span>mdi-social-poll</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-public"></i><span>mdi-social-public</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-school"></i><span>mdi-social-school</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-share"></i><span>mdi-social-share</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-social-whatshot"></i><span>mdi-social-whatshot</span>
                  </div>
                </div>
                <div class="divider"></div>
                <!--toggle-icons-->
                <div id="toggle" class="row icon-container section">
                  <div class="col s12 m12 l12"><h4 class="header">Toggle</h4></div>

                  <div class="icon-preview col s6 m3"><i class="mdi-toggle-check-box"></i><span>mdi-toggle-check-box</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-toggle-check-box-outline-blank"></i><span>mdi-toggle-check-box-outline-blank</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-toggle-radio-button-off"></i><span>mdi-toggle-radio-button-off</span>
                  </div>
                  <div class="icon-preview col s6 m3"><i class="mdi-toggle-radio-button-on"></i><span>mdi-toggle-radio-button-on</span>
                  </div>
                </div>


            </div>
            <!-- Floating Action Button -->
            <div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
                <a class="btn-floating btn-large">
                  <i class="mdi-action-stars"></i>
                </a>
                <ul>
                  <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
                  <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
                  <li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
                  <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
                </ul>
            </div>
            <!-- Floating Action Button -->
            </div>
        </div>
        <!--end container-->

      </section>
      <!-- END CONTENT -->

      <!-- //////////////////////////////////////////////////////////////////////////// -->
      <!-- START RIGHT SIDEBAR NAV-->
      <aside id="right-sidebar-nav">
        <ul id="chat-out" class="side-nav rightside-navigation">
            <li class="li-hover">
            <a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
            <div id="right-search" class="row">
                <form class="col s12">
                    <div class="input-field">
                        <i class="mdi-action-search prefix"></i>
                        <input id="icon_prefix" type="text" class="validate">
                        <label for="icon_prefix">Search</label>
                    </div>
                </form>
            </div>
            </li>
            <li class="li-hover">
                <ul class="chat-collapsible" data-collapsible="expandable">
                <li>
                    <div class="collapsible-header teal white-text active"><i class="mdi-social-whatshot"></i>Recent Activity</div>
                    <div class="collapsible-body recent-activity">
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-add-shopping-cart"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">just now</a>
                                <p>Jim Doe Purchased new equipments for zonal office.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-device-airplanemode-on"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">Yesterday</a>
                                <p>Your Next flight for USA will be on 15th August 2015.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">5 Days Ago</a>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-store"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">Last Week</a>
                                <p>Jessy Jay open a new store at S.G Road.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">5 Days Ago</a>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header light-blue white-text active"><i class="mdi-editor-attach-money"></i>Sales Repoart</div>
                    <div class="collapsible-body sales-repoart">
                        <div class="sales-repoart-list  chat-out-list row">
                            <div class="col s8">Target Salse</div>
                            <div class="col s4"><span id="sales-line-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Payment Due</div>
                            <div class="col s4"><span id="sales-bar-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Delivery</div>
                            <div class="col s4"><span id="sales-line-2"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Progress</div>
                            <div class="col s4"><span id="sales-bar-2"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header red white-text"><i class="mdi-action-stars"></i>Favorite Associates</div>
                    <div class="collapsible-body favorite-associates">
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Eileen Sideways</p>
                                <p class="place">Los Angeles, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Zaham Sindil</p>
                                <p class="place">San Francisco, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Renov Leongal</p>
                                <p class="place">Cebu City, Philippines</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Weno Carasbong</p>
                                <p>Tokyo, Japan</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Nusja Nawancali</p>
                                <p class="place">Bangkok, Thailand</p>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
            </li>
        </ul>
      </aside>
      <!-- LEFT RIGHT SIDEBAR NAV-->

    </div>
    <!-- END WRAPPER -->

  </div>
  <!-- END MAIN -->


  <!-- //////////////////////////////////////////////////////////////////////////// -->

  <!-- START FOOTER -->
  <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        <span>Copyright © 2015 <a class="grey-text text-lighten-4" href="http://themeforest.net/user/geekslabs/portfolio?ref=geekslabs" target="_blank">GeeksLabs</a> All rights reserved.</span>
        <span class="right"> Design and Developed by <a class="grey-text text-lighten-4" href="http://geekslabs.com/">GeeksLabs</a></span>
        </div>
    </div>
  </footer>
  <!-- END FOOTER -->


    <!-- ================================================
    Scripts
    ================================================ -->

    <!-- jQuery Library -->
    <script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
    <!--materialize js-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <!--prism-->
    <script type="text/javascript" src="js/plugins/prism/prism.js"></script>
    <!--scrollbar-->
    <script type="text/javascript" src="js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <!-- chartist -->
    <script type="text/javascript" src="js/plugins/chartist-js/chartist.min.js"></script>

    <!--plugins.js - Some Specific JS codes for Plugin Settings-->
    <script type="text/javascript" src="js/plugins.min.js"></script>
    <!--custom-script.js - Add your own theme custom JS-->
    <script type="text/javascript" src="js/custom-script.js"></script>

</body>

</html>