<?php $__env->startSection('title','Icons'); ?>


<?php $__env->startSection('page-style'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo e(asset('css/pages/icon.css')); ?>">
<?php $__env->stopSection(); ?>


<?php $__env->startSection('content'); ?>
<div class="section">
  <div class="card">
    <div class="card-content">
      <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>
  </div>
  <!--Icon Sizes-->
  <div class="row">
    <div class="col s12 m12 l12">
      <div id="icon-sizes" class="card card-default">
        <div class="card-content">
          <h4 class="card-title">Usage</h4>
          <div class="row">
            <div class="col s12">
              <p>To be able to use these icons, you must include this line in
                the <code class="language-markup">&lt;head></code>portion
                of your HTML code</p>
              <pre><code class="language-markup">
            &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></code></pre>
              <p>To use these icons, use the material-icons class on an
                element and provide the ligature
                as the text content.</p>
              <pre><code class="language-markup">
            &lt;i class="material-icons">add&lt;/i>
            </code></pre>
            </div>
          </div>
          <h4 class="card-title">Sizes</h4>
          <div class="row">
            <div class="col s12">
              <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">
              <div class="card-panel">
                <div class="row">
                  <div class="center-align">
                    <div class="col s3">
                      <i class="material-icons tiny icon-demo">insert_chart</i>
                      <br>
                      <p>Tiny</p>
                    </div>
                    <div class="col s3">
                      <i class="material-icons small icon-demo">insert_chart</i>
                      <br>
                      <p>Small</p>
                    </div>
                    <div class="col s3">
                      <i class="material-icons medium icon-demo">insert_chart</i>
                      <br>
                      <p>Medium</p>
                    </div>
                    <div class="col s3">
                      <i class="material-icons large icon-demo">insert_chart</i>
                      <br>
                      <p>Large</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Icon Listing -->
  <!--action-icons-->
  <div class="row">
    <div class="col s12 m12 l12">
      <div id="action" class="card card-default icon-container">
        <div class="card-content">
          <div class="row">
            <div class="col s12 m12 l12">
              <h4 class="card-title">Action</h4>
            </div>
          </div>
          <div class="row">
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">3d_rotation</i><span>3d_rotation</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">ac_unit</i><span>ac_unit</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">access_alarm</i><span>access_alarm</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">access_alarms</i><span>access_alarms</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">access_time</i><span>access_time</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">accessibility</i><span>accessibility</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">accessible</i><span>accessible</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">account_balance</i><span>account_balance</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">account_balance_wallet</i><span>account_balance_wallet</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">account_box</i><span>account_box</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">account_circle</i><span>account_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">adb</i><span>adb</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add</i><span>add</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_a_photo</i><span>add_a_photo</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_alarm</i><span>add_alarm</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_alert</i><span>add_alert</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_box</i><span>add_box</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_circle</i><span>add_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">add_circle_outline</i><span>add_circle_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_location</i><span>add_location</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">add_shopping_cart</i><span>add_shopping_cart</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">add_to_photos</i><span>add_to_photos</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">add_to_queue</i><span>add_to_queue</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">adjust</i><span>adjust</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_flat</i><span>airline_seat_flat</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_flat_angled</i><span>airline_seat_flat_angled</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_individual_suite</i><span>airline_seat_individual_suite</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_legroom_extra</i><span>airline_seat_legroom_extra</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_legroom_normal</i><span>airline_seat_legroom_normal</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_legroom_reduced</i><span>airline_seat_legroom_reduced</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_recline_extra</i><span>airline_seat_recline_extra</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airline_seat_recline_normal</i><span>airline_seat_recline_normal</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airplanemode_active</i><span>airplanemode_active</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airplanemode_inactive</i><span>airplanemode_inactive</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">airplay</i><span>airplay</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">airport_shuttle</i><span>airport_shuttle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">alarm</i><span>alarm</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">alarm_add</i><span>alarm_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">alarm_off</i><span>alarm_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">alarm_on</i><span>alarm_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">album</i><span>album</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">all_inclusive</i><span>all_inclusive</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">all_out</i><span>all_out</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">android</i><span>android</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">announcement</i><span>announcement</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">apps</i><span>apps</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">archive</i><span>archive</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">arrow_back</i><span>arrow_back</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">arrow_downward</i><span>arrow_downward</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">arrow_drop_down</i><span>arrow_drop_down</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">arrow_drop_down_circle</i><span>arrow_drop_down_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">arrow_drop_up</i><span>arrow_drop_up</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">arrow_forward</i><span>arrow_forward</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">arrow_upward</i><span>arrow_upward</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">art_track</i><span>art_track</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">aspect_ratio</i><span>aspect_ratio</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">assessment</i><span>assessment</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">assignment</i><span>assignment</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">assignment_ind</i><span>assignment_ind</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">assignment_late</i><span>assignment_late</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">assignment_return</i><span>assignment_return</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">assignment_returned</i><span>assignment_returned</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">assignment_turned_in</i><span>assignment_turned_in</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">assistant</i><span>assistant</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">assistant_photo</i><span>assistant_photo</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">attach_file</i><span>attach_file</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">attach_money</i><span>attach_money</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">attachment</i><span>attachment</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">audiotrack</i><span>audiotrack</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">autorenew</i><span>autorenew</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">av_timer</i><span>av_timer</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">backspace</i><span>backspace</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">backup</i><span>backup</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">battery_alert</i><span>battery_alert</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">battery_charging_full</i><span>battery_charging_full</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">battery_full</i><span>battery_full</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">battery_std</i><span>battery_std</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">battery_unknown</i><span>battery_unknown</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">beach_access</i><span>beach_access</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">beenhere</i><span>beenhere</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">block</i><span>block</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">bluetooth</i><span>bluetooth</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">bluetooth_audio</i><span>bluetooth_audio</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">bluetooth_connected</i><span>bluetooth_connected</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">bluetooth_disabled</i><span>bluetooth_disabled</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">bluetooth_searching</i><span>bluetooth_searching</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">blur_circular</i><span>blur_circular</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">blur_linear</i><span>blur_linear</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">blur_off</i><span>blur_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">blur_on</i><span>blur_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">book</i><span>book</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">bookmark</i><span>bookmark</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">bookmark_border</i><span>bookmark_border</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_all</i><span>border_all</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">border_bottom</i><span>border_bottom</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_clear</i><span>border_clear</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_color</i><span>border_color</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">border_horizontal</i><span>border_horizontal</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_inner</i><span>border_inner</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_left</i><span>border_left</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_outer</i><span>border_outer</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_right</i><span>border_right</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_style</i><span>border_style</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">border_top</i><span>border_top</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">border_vertical</i><span>border_vertical</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">branding_watermark</i><span>branding_watermark</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_1</i><span>brightness_1</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_2</i><span>brightness_2</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_3</i><span>brightness_3</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_4</i><span>brightness_4</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_5</i><span>brightness_5</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_6</i><span>brightness_6</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brightness_7</i><span>brightness_7</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">brightness_auto</i><span>brightness_auto</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">brightness_high</i><span>brightness_high</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">brightness_low</i><span>brightness_low</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">brightness_medium</i><span>brightness_medium</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">broken_image</i><span>broken_image</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">brush</i><span>brush</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">bubble_chart</i><span>bubble_chart</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">bug_report</i><span>bug_report</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">build</i><span>build</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">burst_mode</i><span>burst_mode</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">business</i><span>business</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">business_center</i><span>business_center</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cached</i><span>cached</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cake</i><span>cake</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">call</i><span>call</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">call_end</i><span>call_end</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">call_made</i><span>call_made</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">call_merge</i><span>call_merge</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">call_missed</i><span>call_missed</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">call_missed_outgoing</i><span>call_missed_outgoing</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">call_received</i><span>call_received</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">call_split</i><span>call_split</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">call_to_action</i><span>call_to_action</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">camera</i><span>camera</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">camera_alt</i><span>camera_alt</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">camera_enhance</i><span>camera_enhance</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">camera_front</i><span>camera_front</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">camera_rear</i><span>camera_rear</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">camera_roll</i><span>camera_roll</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cancel</i><span>cancel</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">card_giftcard</i><span>card_giftcard</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">card_membership</i><span>card_membership</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">card_travel</i><span>card_travel</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">casino</i><span>casino</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cast</i><span>cast</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">cast_connected</i><span>cast_connected</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">center_focus_strong</i><span>center_focus_strong</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">center_focus_weak</i><span>center_focus_weak</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">change_history</i><span>change_history</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">chat</i><span>chat</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">chat_bubble</i><span>chat_bubble</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">chat_bubble_outline</i><span>chat_bubble_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">check</i><span>check</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">check_box</i><span>check_box</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">check_box_outline_blank</i><span>check_box_outline_blank</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">check_circle</i><span>check_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">chevron_left</i><span>chevron_left</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">chevron_right</i><span>chevron_right</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">child_care</i><span>child_care</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">child_friendly</i><span>child_friendly</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">chrome_reader_mode</i><span>chrome_reader_mode</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">class</i><span>class</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">clear</i><span>clear</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">clear_all</i><span>clear_all</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">close</i><span>close</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">closed_caption</i><span>closed_caption</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cloud</i><span>cloud</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cloud_circle</i><span>cloud_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cloud_done</i><span>cloud_done</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">cloud_download</i><span>cloud_download</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cloud_off</i><span>cloud_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cloud_queue</i><span>cloud_queue</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">cloud_upload</i><span>cloud_upload</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">code</i><span>code</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">collections</i><span>collections</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">collections_bookmark</i><span>collections_bookmark</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">color_lens</i><span>color_lens</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">colorize</i><span>colorize</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">comment</i><span>comment</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">compare</i><span>compare</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">compare_arrows</i><span>compare_arrows</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">computer</i><span>computer</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">confirmation_number</i><span>confirmation_number</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">contact_mail</i><span>contact_mail</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">contact_phone</i><span>contact_phone</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">contacts</i><span>contacts</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">content_copy</i><span>content_copy</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">content_cut</i><span>content_cut</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">content_paste</i><span>content_paste</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">control_point</i><span>control_point</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">control_point_duplicate</i><span>control_point_duplicate</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">copyright</i><span>copyright</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">create</i><span>create</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">create_new_folder</i><span>create_new_folder</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">credit_card</i><span>credit_card</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop</i><span>crop</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_16_9</i><span>crop_16_9</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_3_2</i><span>crop_3_2</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_5_4</i><span>crop_5_4</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_7_5</i><span>crop_7_5</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_din</i><span>crop_din</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_free</i><span>crop_free</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">crop_landscape</i><span>crop_landscape</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">crop_original</i><span>crop_original</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">crop_portrait</i><span>crop_portrait</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_rotate</i><span>crop_rotate</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">crop_square</i><span>crop_square</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dashboard</i><span>dashboard</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">data_usage</i><span>data_usage</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">date_range</i><span>date_range</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dehaze</i><span>dehaze</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">delete</i><span>delete</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">delete_forever</i><span>delete_forever</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">delete_sweep</i><span>delete_sweep</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">description</i><span>description</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">desktop_mac</i><span>desktop_mac</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">desktop_windows</i><span>desktop_windows</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">details</i><span>details</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">developer_board</i><span>developer_board</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">developer_mode</i><span>developer_mode</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">device_hub</i><span>device_hub</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">devices</i><span>devices</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">devices_other</i><span>devices_other</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dialer_sip</i><span>dialer_sip</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dialpad</i><span>dialpad</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">directions</i><span>directions</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_bike</i><span>directions_bike</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_boat</i><span>directions_boat</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_bus</i><span>directions_bus</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_car</i><span>directions_car</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_railway</i><span>directions_railway</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_run</i><span>directions_run</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_subway</i><span>directions_subway</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_transit</i><span>directions_transit</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">directions_walk</i><span>directions_walk</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">disc_full</i><span>disc_full</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dns</i><span>dns</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">do_not_disturb</i><span>do_not_disturb</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">do_not_disturb_alt</i><span>do_not_disturb_alt</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">do_not_disturb_off</i><span>do_not_disturb_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">do_not_disturb_on</i><span>do_not_disturb_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dock</i><span>dock</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">domain</i><span>domain</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">done</i><span>done</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">done_all</i><span>done_all</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">donut_large</i><span>donut_large</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">donut_small</i><span>donut_small</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">drafts</i><span>drafts</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">drag_handle</i><span>drag_handle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">drive_eta</i><span>drive_eta</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">dvr</i><span>dvr</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">edit</i><span>edit</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">edit_location</i><span>edit_location</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">eject</i><span>eject</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">email</i><span>email</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">enhanced_encryption</i><span>enhanced_encryption</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">equalizer</i><span>equalizer</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">error</i><span>error</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">error_outline</i><span>error_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">euro_symbol</i><span>euro_symbol</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">ev_station</i><span>ev_station</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">event</i><span>event</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">event_available</i><span>event_available</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">event_busy</i><span>event_busy</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">event_note</i><span>event_note</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">event_seat</i><span>event_seat</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">exit_to_app</i><span>exit_to_app</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">expand_less</i><span>expand_less</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">expand_more</i><span>expand_more</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">explicit</i><span>explicit</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">explore</i><span>explore</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">exposure</i><span>exposure</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">exposure_neg_1</i><span>exposure_neg_1</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">exposure_neg_2</i><span>exposure_neg_2</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">exposure_plus_1</i><span>exposure_plus_1</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">exposure_plus_2</i><span>exposure_plus_2</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">exposure_zero</i><span>exposure_zero</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">extension</i><span>extension</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">face</i><span>face</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fast_forward</i><span>fast_forward</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fast_rewind</i><span>fast_rewind</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">favorite</i><span>favorite</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">favorite_border</i><span>favorite_border</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">featured_play_list</i><span>featured_play_list</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">featured_video</i><span>featured_video</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">feedback</i><span>feedback</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fiber_dvr</i><span>fiber_dvr</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">fiber_manual_record</i><span>fiber_manual_record</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fiber_new</i><span>fiber_new</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fiber_pin</i><span>fiber_pin</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">fiber_smart_record</i><span>fiber_smart_record</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">file_download</i><span>file_download</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">file_upload</i><span>file_upload</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter</i><span>filter</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_1</i><span>filter_1</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_2</i><span>filter_2</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_3</i><span>filter_3</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_4</i><span>filter_4</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_5</i><span>filter_5</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_6</i><span>filter_6</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_7</i><span>filter_7</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_8</i><span>filter_8</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_9</i><span>filter_9</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">filter_9_plus</i><span>filter_9_plus</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">filter_b_and_w</i><span>filter_b_and_w</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">filter_center_focus</i><span>filter_center_focus</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_drama</i><span>filter_drama</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">filter_frames</i><span>filter_frames</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_hdr</i><span>filter_hdr</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_list</i><span>filter_list</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">filter_none</i><span>filter_none</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">filter_tilt_shift</i><span>filter_tilt_shift</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">filter_vintage</i><span>filter_vintage</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">find_in_page</i><span>find_in_page</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">find_replace</i><span>find_replace</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fingerprint</i><span>fingerprint</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">first_page</i><span>first_page</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">fitness_center</i><span>fitness_center</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flag</i><span>flag</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flare</i><span>flare</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flash_auto</i><span>flash_auto</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flash_off</i><span>flash_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flash_on</i><span>flash_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flight</i><span>flight</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flight_land</i><span>flight_land</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">flight_takeoff</i><span>flight_takeoff</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flip</i><span>flip</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">flip_to_back</i><span>flip_to_back</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">flip_to_front</i><span>flip_to_front</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">folder</i><span>folder</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">folder_open</i><span>folder_open</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">folder_shared</i><span>folder_shared</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">folder_special</i><span>folder_special</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">font_download</i><span>font_download</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_align_center</i><span>format_align_center</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_align_justify</i><span>format_align_justify</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_align_left</i><span>format_align_left</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_align_right</i><span>format_align_right</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">format_bold</i><span>format_bold</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">format_clear</i><span>format_clear</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_color_fill</i><span>format_color_fill</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_color_reset</i><span>format_color_reset</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_color_text</i><span>format_color_text</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_indent_decrease</i><span>format_indent_decrease</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_indent_increase</i><span>format_indent_increase</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_italic</i><span>format_italic</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_line_spacing</i><span>format_line_spacing</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_list_bulleted</i><span>format_list_bulleted</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_list_numbered</i><span>format_list_numbered</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">format_paint</i><span>format_paint</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">format_quote</i><span>format_quote</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_shapes</i><span>format_shapes</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">format_size</i><span>format_size</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_strikethrough</i><span>format_strikethrough</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_textdirection_l_to_r</i><span>format_textdirection_l_to_r</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_textdirection_r_to_l</i><span>format_textdirection_r_to_l</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">format_underlined</i><span>format_underlined</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">forum</i><span>forum</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">forward</i><span>forward</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">forward_10</i><span>forward_10</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">forward_30</i><span>forward_30</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">forward_5</i><span>forward_5</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">free_breakfast</i><span>free_breakfast</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">fullscreen</i><span>fullscreen</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">fullscreen_exit</i><span>fullscreen_exit</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">functions</i><span>functions</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">g_translate</i><span>g_translate</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gamepad</i><span>gamepad</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">games</i><span>games</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gavel</i><span>gavel</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gesture</i><span>gesture</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">get_app</i><span>get_app</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gif</i><span>gif</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">golf_course</i><span>golf_course</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gps_fixed</i><span>gps_fixed</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">gps_not_fixed</i><span>gps_not_fixed</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gps_off</i><span>gps_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">grade</i><span>grade</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">gradient</i><span>gradient</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">grain</i><span>grain</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">graphic_eq</i><span>graphic_eq</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">grid_off</i><span>grid_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">grid_on</i><span>grid_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">group</i><span>group</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">group_add</i><span>group_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">group_work</i><span>group_work</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hd</i><span>hd</span></div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hdr_off</i><span>hdr_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hdr_on</i><span>hdr_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hdr_strong</i><span>hdr_strong</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hdr_weak</i><span>hdr_weak</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">headset</i><span>headset</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">headset_mic</i><span>headset_mic</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">healing</i><span>healing</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hearing</i><span>hearing</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">help</i><span>help</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">help_outline</i><span>help_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">high_quality</i><span>high_quality</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">highlight</i><span>highlight</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">highlight_off</i><span>highlight_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">history</i><span>history</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">home</i><span>home</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hot_tub</i><span>hot_tub</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">hotel</i><span>hotel</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">hourglass_empty</i><span>hourglass_empty</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">hourglass_full</i><span>hourglass_full</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">http</i><span>http</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">https</i><span>https</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">image</i><span>image</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">image_aspect_ratio</i><span>image_aspect_ratio</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">import_contacts</i><span>import_contacts</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">import_export</i><span>import_export</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">important_devices</i><span>important_devices</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">inbox</i><span>inbox</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">indeterminate_check_box</i><span>indeterminate_check_box</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">info</i><span>info</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">info_outline</i><span>info_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">input</i><span>input</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">insert_chart</i><span>insert_chart</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">insert_comment</i><span>insert_comment</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">insert_drive_file</i><span>insert_drive_file</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">insert_emoticon</i><span>insert_emoticon</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">insert_invitation</i><span>insert_invitation</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">insert_link</i><span>insert_link</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">insert_photo</i><span>insert_photo</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">invert_colors</i><span>invert_colors</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">invert_colors_off</i><span>invert_colors_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">iso</i><span>iso</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">keyboard</i><span>keyboard</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_arrow_down</i><span>keyboard_arrow_down</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_arrow_left</i><span>keyboard_arrow_left</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_arrow_right</i><span>keyboard_arrow_right</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_arrow_up</i><span>keyboard_arrow_up</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_backspace</i><span>keyboard_backspace</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_capslock</i><span>keyboard_capslock</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_hide</i><span>keyboard_hide</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_return</i><span>keyboard_return</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">keyboard_tab</i><span>keyboard_tab</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">keyboard_voice</i><span>keyboard_voice</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">kitchen</i><span>kitchen</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">label</i><span>label</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">label_outline</i><span>label_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">landscape</i><span>landscape</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">language</i><span>language</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">laptop</i><span>laptop</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">laptop_chromebook</i><span>laptop_chromebook</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">laptop_mac</i><span>laptop_mac</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">laptop_windows</i><span>laptop_windows</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">last_page</i><span>last_page</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">launch</i><span>launch</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">layers</i><span>layers</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">layers_clear</i><span>layers_clear</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">leak_add</i><span>leak_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">leak_remove</i><span>leak_remove</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">lens</i><span>lens</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">library_add</i><span>library_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">library_books</i><span>library_books</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">library_music</i><span>library_music</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">lightbulb_outline</i><span>lightbulb_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">line_style</i><span>line_style</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">line_weight</i><span>line_weight</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">linear_scale</i><span>linear_scale</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">link</i><span>link</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">linked_camera</i><span>linked_camera</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">list</i><span>list</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">live_help</i><span>live_help</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">live_tv</i><span>live_tv</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_activity</i><span>local_activity</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_airport</i><span>local_airport</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_atm</i><span>local_atm</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_bar</i><span>local_bar</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_cafe</i><span>local_cafe</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_car_wash</i><span>local_car_wash</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_convenience_store</i><span>local_convenience_store</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_dining</i><span>local_dining</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_drink</i><span>local_drink</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_florist</i><span>local_florist</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_gas_station</i><span>local_gas_station</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_grocery_store</i><span>local_grocery_store</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_hospital</i><span>local_hospital</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_hotel</i><span>local_hotel</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_laundry_service</i><span>local_laundry_service</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_library</i><span>local_library</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_mall</i><span>local_mall</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_movies</i><span>local_movies</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_offer</i><span>local_offer</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_parking</i><span>local_parking</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_pharmacy</i><span>local_pharmacy</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_phone</i><span>local_phone</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_pizza</i><span>local_pizza</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_play</i><span>local_play</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_post_office</i><span>local_post_office</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_printshop</i><span>local_printshop</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_see</i><span>local_see</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">local_shipping</i><span>local_shipping</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">local_taxi</i><span>local_taxi</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">location_city</i><span>location_city</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">location_disabled</i><span>location_disabled</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">location_off</i><span>location_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">location_on</i><span>location_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">location_searching</i><span>location_searching</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">lock</i><span>lock</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">lock_open</i><span>lock_open</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">lock_outline</i><span>lock_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks</i><span>looks</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks_3</i><span>looks_3</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks_4</i><span>looks_4</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks_5</i><span>looks_5</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks_6</i><span>looks_6</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks_one</i><span>looks_one</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">looks_two</i><span>looks_two</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">loop</i><span>loop</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">loupe</i><span>loupe</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">low_priority</i><span>low_priority</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">loyalty</i><span>loyalty</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mail</i><span>mail</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mail_outline</i><span>mail_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">map</i><span>map</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">markunread</i><span>markunread</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">markunread_mailbox</i><span>markunread_mailbox</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">memory</i><span>memory</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">menu</i><span>menu</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">merge_type</i><span>merge_type</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">message</i><span>message</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mic</i><span>mic</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mic_none</i><span>mic_none</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mic_off</i><span>mic_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mms</i><span>mms</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mode_comment</i><span>mode_comment</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mode_edit</i><span>mode_edit</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">monetization_on</i><span>monetization_on</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">money_off</i><span>money_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">monochrome_photos</i><span>monochrome_photos</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mood</i><span>mood</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mood_bad</i><span>mood_bad</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">more</i><span>more</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">more_horiz</i><span>more_horiz</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">more_vert</i><span>more_vert</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">motorcycle</i><span>motorcycle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">mouse</i><span>mouse</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">move_to_inbox</i><span>move_to_inbox</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">movie</i><span>movie</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">movie_creation</i><span>movie_creation</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">movie_filter</i><span>movie_filter</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">multiline_chart</i><span>multiline_chart</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">music_note</i><span>music_note</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">music_video</i><span>music_video</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">my_location</i><span>my_location</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">nature</i><span>nature</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">nature_people</i><span>nature_people</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">navigate_before</i><span>navigate_before</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">navigate_next</i><span>navigate_next</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">navigation</i><span>navigation</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">near_me</i><span>near_me</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">network_cell</i><span>network_cell</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">network_check</i><span>network_check</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">network_locked</i><span>network_locked</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">network_wifi</i><span>network_wifi</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">new_releases</i><span>new_releases</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">next_week</i><span>next_week</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">nfc</i><span>nfc</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">no_encryption</i><span>no_encryption</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">no_sim</i><span>no_sim</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">not_interested</i><span>not_interested</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">note</i><span>note</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">note_add</i><span>note_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">notifications</i><span>notifications</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">notifications_active</i><span>notifications_active</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">notifications_none</i><span>notifications_none</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">notifications_off</i><span>notifications_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">notifications_paused</i><span>notifications_paused</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">offline_pin</i><span>offline_pin</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">ondemand_video</i><span>ondemand_video</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">opacity</i><span>opacity</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">open_in_browser</i><span>open_in_browser</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">open_in_new</i><span>open_in_new</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">open_with</i><span>open_with</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pages</i><span>pages</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pageview</i><span>pageview</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">palette</i><span>palette</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pan_tool</i><span>pan_tool</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">panorama</i><span>panorama</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">panorama_fish_eye</i><span>panorama_fish_eye</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">panorama_horizontal</i><span>panorama_horizontal</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">panorama_vertical</i><span>panorama_vertical</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">panorama_wide_angle</i><span>panorama_wide_angle</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">party_mode</i><span>party_mode</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pause</i><span>pause</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">pause_circle_filled</i><span>pause_circle_filled</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">pause_circle_outline</i><span>pause_circle_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">payment</i><span>payment</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">people</i><span>people</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">people_outline</i><span>people_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_camera_mic</i><span>perm_camera_mic</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_contact_calendar</i><span>perm_contact_calendar</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_data_setting</i><span>perm_data_setting</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_device_information</i><span>perm_device_information</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_identity</i><span>perm_identity</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">perm_media</i><span>perm_media</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_phone_msg</i><span>perm_phone_msg</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">perm_scan_wifi</i><span>perm_scan_wifi</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">person</i><span>person</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">person_add</i><span>person_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">person_outline</i><span>person_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">person_pin</i><span>person_pin</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">person_pin_circle</i><span>person_pin_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">personal_video</i><span>personal_video</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pets</i><span>pets</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">phone</i><span>phone</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phone_android</i><span>phone_android</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phone_bluetooth_speaker</i><span>phone_bluetooth_speaker</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phone_forwarded</i><span>phone_forwarded</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phone_in_talk</i><span>phone_in_talk</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">phone_iphone</i><span>phone_iphone</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">phone_locked</i><span>phone_locked</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">phone_missed</i><span>phone_missed</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">phone_paused</i><span>phone_paused</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">phonelink</i><span>phonelink</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phonelink_erase</i><span>phonelink_erase</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phonelink_lock</i><span>phonelink_lock</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phonelink_off</i><span>phonelink_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phonelink_ring</i><span>phonelink_ring</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">phonelink_setup</i><span>phonelink_setup</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">photo</i><span>photo</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">photo_album</i><span>photo_album</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">photo_camera</i><span>photo_camera</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">photo_filter</i><span>photo_filter</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">photo_library</i><span>photo_library</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">photo_size_select_actual</i><span>photo_size_select_actual</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">photo_size_select_large</i><span>photo_size_select_large</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">photo_size_select_small</i><span>photo_size_select_small</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">picture_as_pdf</i><span>picture_as_pdf</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">picture_in_picture</i><span>picture_in_picture</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">picture_in_picture_alt</i><span>picture_in_picture_alt</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pie_chart</i><span>pie_chart</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">pie_chart_outlined</i><span>pie_chart_outlined</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pin_drop</i><span>pin_drop</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">place</i><span>place</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">play_arrow</i><span>play_arrow</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">play_circle_filled</i><span>play_circle_filled</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">play_circle_outline</i><span>play_circle_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">play_for_work</i><span>play_for_work</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">playlist_add</i><span>playlist_add</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">playlist_add_check</i><span>playlist_add_check</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">playlist_play</i><span>playlist_play</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">plus_one</i><span>plus_one</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">poll</i><span>poll</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">polymer</i><span>polymer</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">pool</i><span>pool</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">portable_wifi_off</i><span>portable_wifi_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">portrait</i><span>portrait</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">power</i><span>power</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">power_input</i><span>power_input</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">power_settings_new</i><span>power_settings_new</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">pregnant_woman</i><span>pregnant_woman</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">present_to_all</i><span>present_to_all</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">print</i><span>print</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">priority_high</i><span>priority_high</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">public</i><span>public</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">publish</i><span>publish</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">query_builder</i><span>query_builder</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">question_answer</i><span>question_answer</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">queue</i><span>queue</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">queue_music</i><span>queue_music</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">queue_play_next</i><span>queue_play_next</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">radio</i><span>radio</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">radio_button_checked</i><span>radio_button_checked</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">radio_button_unchecked</i><span>radio_button_unchecked</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">rate_review</i><span>rate_review</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">receipt</i><span>receipt</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">recent_actors</i><span>recent_actors</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">record_voice_over</i><span>record_voice_over</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">redeem</i><span>redeem</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">redo</i><span>redo</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">refresh</i><span>refresh</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">remove</i><span>remove</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">remove_circle</i><span>remove_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">remove_circle_outline</i><span>remove_circle_outline</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">remove_from_queue</i><span>remove_from_queue</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">remove_red_eye</i><span>remove_red_eye</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">remove_shopping_cart</i><span>remove_shopping_cart</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">reorder</i><span>reorder</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">repeat</i><span>repeat</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">repeat_one</i><span>repeat_one</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">replay</i><span>replay</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">replay_10</i><span>replay_10</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">replay_30</i><span>replay_30</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">replay_5</i><span>replay_5</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">reply</i><span>reply</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">reply_all</i><span>reply_all</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">report</i><span>report</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">report_problem</i><span>report_problem</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">restaurant</i><span>restaurant</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">restaurant_menu</i><span>restaurant_menu</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">restore</i><span>restore</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">restore_page</i><span>restore_page</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">ring_volume</i><span>ring_volume</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">room</i><span>room</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">room_service</i><span>room_service</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">rotate_90_degrees_ccw</i><span>rotate_90_degrees_ccw</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">rotate_left</i><span>rotate_left</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">rotate_right</i><span>rotate_right</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">rounded_corner</i><span>rounded_corner</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">router</i><span>router</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">rowing</i><span>rowing</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">rss_feed</i><span>rss_feed</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">rv_hookup</i><span>rv_hookup</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">satellite</i><span>satellite</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">save</i><span>save</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">scanner</i><span>scanner</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">schedule</i><span>schedule</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">school</i><span>school</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">screen_lock_landscape</i><span>screen_lock_landscape</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">screen_lock_portrait</i><span>screen_lock_portrait</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">screen_lock_rotation</i><span>screen_lock_rotation</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">screen_rotation</i><span>screen_rotation</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">screen_share</i><span>screen_share</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sd_card</i><span>sd_card</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sd_storage</i><span>sd_storage</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">search</i><span>search</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">security</i><span>security</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">select_all</i><span>select_all</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">send</i><span>send</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sentiment_dissatisfied</i><span>sentiment_dissatisfied</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sentiment_neutral</i><span>sentiment_neutral</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sentiment_satisfied</i><span>sentiment_satisfied</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sentiment_very_dissatisfied</i><span>sentiment_very_dissatisfied</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sentiment_very_satisfied</i><span>sentiment_very_satisfied</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">settings</i><span>settings</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_applications</i><span>settings_applications</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_backup_restore</i><span>settings_backup_restore</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_bluetooth</i><span>settings_bluetooth</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_brightness</i><span>settings_brightness</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_cell</i><span>settings_cell</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_ethernet</i><span>settings_ethernet</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_input_antenna</i><span>settings_input_antenna</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_input_component</i><span>settings_input_component</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_input_composite</i><span>settings_input_composite</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_input_hdmi</i><span>settings_input_hdmi</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_input_svideo</i><span>settings_input_svideo</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_overscan</i><span>settings_overscan</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_phone</i><span>settings_phone</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_power</i><span>settings_power</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_remote</i><span>settings_remote</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_system_daydream</i><span>settings_system_daydream</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">settings_voice</i><span>settings_voice</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">share</i><span>share</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">shop</i><span>shop</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">shop_two</i><span>shop_two</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">shopping_basket</i><span>shopping_basket</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">shopping_cart</i><span>shopping_cart</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">short_text</i><span>short_text</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">show_chart</i><span>show_chart</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">shuffle</i><span>shuffle</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_cellular_4_bar</i><span>signal_cellular_4_bar</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_cellular_connected_no_internet_4_bar</i><span>signal_cellular_connected_no_internet_4_bar</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_cellular_no_sim</i><span>signal_cellular_no_sim</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_cellular_null</i><span>signal_cellular_null</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_cellular_off</i><span>signal_cellular_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_wifi_4_bar</i><span>signal_wifi_4_bar</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_wifi_4_bar_lock</i><span>signal_wifi_4_bar_lock</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">signal_wifi_off</i><span>signal_wifi_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sim_card</i><span>sim_card</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sim_card_alert</i><span>sim_card_alert</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">skip_next</i><span>skip_next</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">skip_previous</i><span>skip_previous</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">slideshow</i><span>slideshow</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">slow_motion_video</i><span>slow_motion_video</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">smartphone</i><span>smartphone</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">smoke_free</i><span>smoke_free</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">smoking_rooms</i><span>smoking_rooms</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sms</i><span>sms</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sms_failed</i><span>sms_failed</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">snooze</i><span>snooze</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sort</i><span>sort</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sort_by_alpha</i><span>sort_by_alpha</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">spa</i><span>spa</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">space_bar</i><span>space_bar</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">speaker</i><span>speaker</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">speaker_group</i><span>speaker_group</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">speaker_notes</i><span>speaker_notes</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">speaker_notes_off</i><span>speaker_notes_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">speaker_phone</i><span>speaker_phone</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">spellcheck</i><span>spellcheck</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">star</i><span>star</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">star_border</i><span>star_border</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">star_half</i><span>star_half</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">stars</i><span>stars</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">stay_current_landscape</i><span>stay_current_landscape</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">stay_current_portrait</i><span>stay_current_portrait</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">stay_primary_landscape</i><span>stay_primary_landscape</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">stay_primary_portrait</i><span>stay_primary_portrait</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">stop</i><span>stop</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">stop_screen_share</i><span>stop_screen_share</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">storage</i><span>storage</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">store</i><span>store</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">store_mall_directory</i><span>store_mall_directory</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">straighten</i><span>straighten</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">streetview</i><span>streetview</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">strikethrough_s</i><span>strikethrough_s</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">style</i><span>style</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">subdirectory_arrow_left</i><span>subdirectory_arrow_left</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">subdirectory_arrow_right</i><span>subdirectory_arrow_right</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">subject</i><span>subject</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">subscriptions</i><span>subscriptions</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">subtitles</i><span>subtitles</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">subway</i><span>subway</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">supervisor_account</i><span>supervisor_account</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">surround_sound</i><span>surround_sound</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">swap_calls</i><span>swap_calls</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">swap_horiz</i><span>swap_horiz</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">swap_vert</i><span>swap_vert</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">swap_vertical_circle</i><span>swap_vertical_circle</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">switch_camera</i><span>switch_camera</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">switch_video</i><span>switch_video</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sync</i><span>sync</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">sync_disabled</i><span>sync_disabled</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">sync_problem</i><span>sync_problem</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">system_update</i><span>system_update</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">system_update_alt</i><span>system_update_alt</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tab</i><span>tab</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">tab_unselected</i><span>tab_unselected</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tablet</i><span>tablet</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">tablet_android</i><span>tablet_android</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tablet_mac</i><span>tablet_mac</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tag_faces</i><span>tag_faces</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tap_and_play</i><span>tap_and_play</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">terrain</i><span>terrain</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">text_fields</i><span>text_fields</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">text_format</i><span>text_format</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">textsms</i><span>textsms</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">texture</i><span>texture</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">theaters</i><span>theaters</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">thumb_down</i><span>thumb_down</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">thumb_up</i><span>thumb_up</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">thumbs_up_down</i><span>thumbs_up_down</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">time_to_leave</i><span>time_to_leave</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">timelapse</i><span>timelapse</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">timeline</i><span>timeline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">timer</i><span>timer</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">timer_10</i><span>timer_10</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">timer_3</i><span>timer_3</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">timer_off</i><span>timer_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">title</i><span>title</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">toc</i><span>toc</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">today</i><span>today</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">toll</i><span>toll</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tonality</i><span>tonality</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">touch_app</i><span>touch_app</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">toys</i><span>toys</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">track_changes</i><span>track_changes</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">traffic</i><span>traffic</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">train</i><span>train</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tram</i><span>tram</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">transfer_within_a_station</i><span>transfer_within_a_station</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">transform</i><span>transform</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">translate</i><span>translate</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">trending_down</i><span>trending_down</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">trending_flat</i><span>trending_flat</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">trending_up</i><span>trending_up</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tune</i><span>tune</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">turned_in</i><span>turned_in</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">turned_in_not</i><span>turned_in_not</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">tv</i><span>tv</span></div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">unarchive</i><span>unarchive</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">undo</i><span>undo</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">unfold_less</i><span>unfold_less</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">unfold_more</i><span>unfold_more</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">update</i><span>update</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">usb</i><span>usb</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">verified_user</i><span>verified_user</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">vertical_align_bottom</i><span>vertical_align_bottom</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">vertical_align_center</i><span>vertical_align_center</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">vertical_align_top</i><span>vertical_align_top</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">vibration</i><span>vibration</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">video_call</i><span>video_call</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">video_label</i><span>video_label</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">video_library</i><span>video_library</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">videocam</i><span>videocam</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">videocam_off</i><span>videocam_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">videogame_asset</i><span>videogame_asset</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_agenda</i><span>view_agenda</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_array</i><span>view_array</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">view_carousel</i><span>view_carousel</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_column</i><span>view_column</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_comfy</i><span>view_comfy</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_compact</i><span>view_compact</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_day</i><span>view_day</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">view_headline</i><span>view_headline</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_list</i><span>view_list</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_module</i><span>view_module</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_quilt</i><span>view_quilt</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_stream</i><span>view_stream</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">view_week</i><span>view_week</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">vignette</i><span>vignette</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">visibility</i><span>visibility</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">visibility_off</i><span>visibility_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">voice_chat</i><span>voice_chat</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">voicemail</i><span>voicemail</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">volume_down</i><span>volume_down</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">volume_mute</i><span>volume_mute</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">volume_off</i><span>volume_off</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">volume_up</i><span>volume_up</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">vpn_key</i><span>vpn_key</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">vpn_lock</i><span>vpn_lock</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wallpaper</i><span>wallpaper</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">warning</i><span>warning</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">watch</i><span>watch</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">watch_later</i><span>watch_later</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wb_auto</i><span>wb_auto</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wb_cloudy</i><span>wb_cloudy</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">wb_incandescent</i><span>wb_incandescent</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">wb_iridescent</i><span>wb_iridescent</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wb_sunny</i><span>wb_sunny</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wc</i><span>wc</span></div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">web</i><span>web</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">web_asset</i><span>web_asset</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">weekend</i><span>weekend</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">whatshot</i><span>whatshot</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">widgets</i><span>widgets</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wifi</i><span>wifi</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wifi_lock</i><span>wifi_lock</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">wifi_tethering</i><span>wifi_tethering</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">work</i><span>work</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">wrap_text</i><span>wrap_text</span>
            </div>
            <div class="icon-preview col s6 m3"><i
                class="material-icons dp48">youtube_searched_for</i><span>youtube_searched_for</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">zoom_in</i><span>zoom_in</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">zoom_out</i><span>zoom_out</span>
            </div>
            <div class="icon-preview col s6 m3"><i class="material-icons dp48">zoom_out_map</i><span>zoom_out_map</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.contentLayoutMaster', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/materialize-admin/materialize-html-laravel-template/resources/views/pages/ui-icons.blade.php ENDPATH**/ ?>