<template>
  <ul class="icon-list">
    <li>
      <span>
        <i class="el-icon-platform-eleme"></i>
        <span class="icon-name">el-icon-platform-eleme</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-eleme"></i>
        <span class="icon-name">el-icon-eleme</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-delete-solid"></i>
        <span class="icon-name">el-icon-delete-solid</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-delete"></i>
        <span class="icon-name">el-icon-delete</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-tools"></i>
        <span class="icon-name">el-icon-s-tools</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-setting"></i>
        <span class="icon-name">el-icon-setting</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-user-solid"></i>
        <span class="icon-name">el-icon-user-solid</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-user"></i>
        <span class="icon-name">el-icon-user</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-phone"></i>
        <span class="icon-name">el-icon-phone</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-phone-outline"></i>
        <span class="icon-name">el-icon-phone-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-more"></i>
        <span class="icon-name">el-icon-more</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-more-outline"></i>
        <span class="icon-name">el-icon-more-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-star-on"></i>
        <span class="icon-name">el-icon-star-on</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-star-off"></i>
        <span class="icon-name">el-icon-star-off</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-goods"></i>
        <span class="icon-name">el-icon-s-goods</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-goods"></i>
        <span class="icon-name">el-icon-goods</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-warning"></i>
        <span class="icon-name">el-icon-warning</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-warning-outline"></i>
        <span class="icon-name">el-icon-warning-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-question"></i>
        <span class="icon-name">el-icon-question</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-info"></i>
        <span class="icon-name">el-icon-info</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-remove"></i>
        <span class="icon-name">el-icon-remove</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-circle-plus"></i>
        <span class="icon-name">el-icon-circle-plus</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-success"></i>
        <span class="icon-name">el-icon-success</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-error"></i>
        <span class="icon-name">el-icon-error</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-zoom-in"></i>
        <span class="icon-name">el-icon-zoom-in</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-zoom-out"></i>
        <span class="icon-name">el-icon-zoom-out</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-remove-outline"></i>
        <span class="icon-name">el-icon-remove-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-circle-plus-outline"></i>
        <span class="icon-name">el-icon-circle-plus-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-circle-check"></i>
        <span class="icon-name">el-icon-circle-check</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-circle-close"></i>
        <span class="icon-name">el-icon-circle-close</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-help"></i>
        <span class="icon-name">el-icon-s-help</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-help"></i>
        <span class="icon-name">el-icon-help</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-minus"></i>
        <span class="icon-name">el-icon-minus</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-plus"></i>
        <span class="icon-name">el-icon-plus</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-check"></i>
        <span class="icon-name">el-icon-check</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-close"></i>
        <span class="icon-name">el-icon-close</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-picture"></i>
        <span class="icon-name">el-icon-picture</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-picture-outline"></i>
        <span class="icon-name">el-icon-picture-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-picture-outline-round"></i>
        <span class="icon-name">el-icon-picture-outline-round</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-upload"></i>
        <span class="icon-name">el-icon-upload</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-upload2"></i>
        <span class="icon-name">el-icon-upload2</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-download"></i>
        <span class="icon-name">el-icon-download</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-camera-solid"></i>
        <span class="icon-name">el-icon-camera-solid</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-camera"></i>
        <span class="icon-name">el-icon-camera</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-video-camera-solid"></i>
        <span class="icon-name">el-icon-video-camera-solid</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-video-camera"></i>
        <span class="icon-name">el-icon-video-camera</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-message-solid"></i>
        <span class="icon-name">el-icon-message-solid</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bell"></i>
        <span class="icon-name">el-icon-bell</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-cooperation"></i>
        <span class="icon-name">el-icon-s-cooperation</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-order"></i>
        <span class="icon-name">el-icon-s-order</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-platform"></i>
        <span class="icon-name">el-icon-s-platform</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-fold"></i>
        <span class="icon-name">el-icon-s-fold</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-unfold"></i>
        <span class="icon-name">el-icon-s-unfold</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-operation"></i>
        <span class="icon-name">el-icon-s-operation</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-promotion"></i>
        <span class="icon-name">el-icon-s-promotion</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-home"></i>
        <span class="icon-name">el-icon-s-home</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-release"></i>
        <span class="icon-name">el-icon-s-release</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-ticket"></i>
        <span class="icon-name">el-icon-s-ticket</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-management"></i>
        <span class="icon-name">el-icon-s-management</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-open"></i>
        <span class="icon-name">el-icon-s-open</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-shop"></i>
        <span class="icon-name">el-icon-s-shop</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-marketing"></i>
        <span class="icon-name">el-icon-s-marketing</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-flag"></i>
        <span class="icon-name">el-icon-s-flag</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-comment"></i>
        <span class="icon-name">el-icon-s-comment</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-finance"></i>
        <span class="icon-name">el-icon-s-finance</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-claim"></i>
        <span class="icon-name">el-icon-s-claim</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-custom"></i>
        <span class="icon-name">el-icon-s-custom</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-opportunity"></i>
        <span class="icon-name">el-icon-s-opportunity</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-data"></i>
        <span class="icon-name">el-icon-s-data</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-check"></i>
        <span class="icon-name">el-icon-s-check</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-s-grid"></i>
        <span class="icon-name">el-icon-s-grid</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-menu"></i>
        <span class="icon-name">el-icon-menu</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-share"></i>
        <span class="icon-name">el-icon-share</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-d-caret"></i>
        <span class="icon-name">el-icon-d-caret</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-caret-left"></i>
        <span class="icon-name">el-icon-caret-left</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-caret-right"></i>
        <span class="icon-name">el-icon-caret-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-caret-bottom"></i>
        <span class="icon-name">el-icon-caret-bottom</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-caret-top"></i>
        <span class="icon-name">el-icon-caret-top</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bottom-left"></i>
        <span class="icon-name">el-icon-bottom-left</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bottom-right"></i>
        <span class="icon-name">el-icon-bottom-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-back"></i>
        <span class="icon-name">el-icon-back</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-right"></i>
        <span class="icon-name">el-icon-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bottom"></i>
        <span class="icon-name">el-icon-bottom</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-top"></i>
        <span class="icon-name">el-icon-top</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-top-left"></i>
        <span class="icon-name">el-icon-top-left</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-top-right"></i>
        <span class="icon-name">el-icon-top-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-arrow-left"></i>
        <span class="icon-name">el-icon-arrow-left</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-arrow-right"></i>
        <span class="icon-name">el-icon-arrow-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-arrow-down"></i>
        <span class="icon-name">el-icon-arrow-down</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-arrow-up"></i>
        <span class="icon-name">el-icon-arrow-up</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-d-arrow-left"></i>
        <span class="icon-name">el-icon-d-arrow-left</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-d-arrow-right"></i>
        <span class="icon-name">el-icon-d-arrow-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-video-pause"></i>
        <span class="icon-name">el-icon-video-pause</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-video-play"></i>
        <span class="icon-name">el-icon-video-play</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-refresh"></i>
        <span class="icon-name">el-icon-refresh</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-refresh-right"></i>
        <span class="icon-name">el-icon-refresh-right</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-refresh-left"></i>
        <span class="icon-name">el-icon-refresh-left</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-finished"></i>
        <span class="icon-name">el-icon-finished</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sort"></i>
        <span class="icon-name">el-icon-sort</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sort-up"></i>
        <span class="icon-name">el-icon-sort-up</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sort-down"></i>
        <span class="icon-name">el-icon-sort-down</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-rank"></i>
        <span class="icon-name">el-icon-rank</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-loading"></i>
        <span class="icon-name">el-icon-loading</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-view"></i>
        <span class="icon-name">el-icon-view</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-c-scale-to-original"></i>
        <span class="icon-name">el-icon-c-scale-to-original</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-date"></i>
        <span class="icon-name">el-icon-date</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-edit"></i>
        <span class="icon-name">el-icon-edit</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-edit-outline"></i>
        <span class="icon-name">el-icon-edit-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-folder"></i>
        <span class="icon-name">el-icon-folder</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-folder-opened"></i>
        <span class="icon-name">el-icon-folder-opened</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-folder-add"></i>
        <span class="icon-name">el-icon-folder-add</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-folder-remove"></i>
        <span class="icon-name">el-icon-folder-remove</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-folder-delete"></i>
        <span class="icon-name">el-icon-folder-delete</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-folder-checked"></i>
        <span class="icon-name">el-icon-folder-checked</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-tickets"></i>
        <span class="icon-name">el-icon-tickets</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-document-remove"></i>
        <span class="icon-name">el-icon-document-remove</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-document-delete"></i>
        <span class="icon-name">el-icon-document-delete</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-document-copy"></i>
        <span class="icon-name">el-icon-document-copy</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-document-checked"></i>
        <span class="icon-name">el-icon-document-checked</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-document"></i>
        <span class="icon-name">el-icon-document</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-document-add"></i>
        <span class="icon-name">el-icon-document-add</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-printer"></i>
        <span class="icon-name">el-icon-printer</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-paperclip"></i>
        <span class="icon-name">el-icon-paperclip</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-takeaway-box"></i>
        <span class="icon-name">el-icon-takeaway-box</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-search"></i>
        <span class="icon-name">el-icon-search</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-monitor"></i>
        <span class="icon-name">el-icon-monitor</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-attract"></i>
        <span class="icon-name">el-icon-attract</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-mobile"></i>
        <span class="icon-name">el-icon-mobile</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-scissors"></i>
        <span class="icon-name">el-icon-scissors</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-umbrella"></i>
        <span class="icon-name">el-icon-umbrella</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-headset"></i>
        <span class="icon-name">el-icon-headset</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-brush"></i>
        <span class="icon-name">el-icon-brush</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-mouse"></i>
        <span class="icon-name">el-icon-mouse</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-coordinate"></i>
        <span class="icon-name">el-icon-coordinate</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-magic-stick"></i>
        <span class="icon-name">el-icon-magic-stick</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-reading"></i>
        <span class="icon-name">el-icon-reading</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-data-line"></i>
        <span class="icon-name">el-icon-data-line</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-data-board"></i>
        <span class="icon-name">el-icon-data-board</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-pie-chart"></i>
        <span class="icon-name">el-icon-pie-chart</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-data-analysis"></i>
        <span class="icon-name">el-icon-data-analysis</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-collection-tag"></i>
        <span class="icon-name">el-icon-collection-tag</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-film"></i>
        <span class="icon-name">el-icon-film</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-suitcase"></i>
        <span class="icon-name">el-icon-suitcase</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-suitcase-1"></i>
        <span class="icon-name">el-icon-suitcase-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-receiving"></i>
        <span class="icon-name">el-icon-receiving</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-collection"></i>
        <span class="icon-name">el-icon-collection</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-files"></i>
        <span class="icon-name">el-icon-files</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-notebook-1"></i>
        <span class="icon-name">el-icon-notebook-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-notebook-2"></i>
        <span class="icon-name">el-icon-notebook-2</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-toilet-paper"></i>
        <span class="icon-name">el-icon-toilet-paper</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-office-building"></i>
        <span class="icon-name">el-icon-office-building</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-school"></i>
        <span class="icon-name">el-icon-school</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-table-lamp"></i>
        <span class="icon-name">el-icon-table-lamp</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-house"></i>
        <span class="icon-name">el-icon-house</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-no-smoking"></i>
        <span class="icon-name">el-icon-no-smoking</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-smoking"></i>
        <span class="icon-name">el-icon-smoking</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-shopping-cart-full"></i>
        <span class="icon-name">el-icon-shopping-cart-full</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-shopping-cart-1"></i>
        <span class="icon-name">el-icon-shopping-cart-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-shopping-cart-2"></i>
        <span class="icon-name">el-icon-shopping-cart-2</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-shopping-bag-1"></i>
        <span class="icon-name">el-icon-shopping-bag-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-shopping-bag-2"></i>
        <span class="icon-name">el-icon-shopping-bag-2</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sold-out"></i>
        <span class="icon-name">el-icon-sold-out</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sell"></i>
        <span class="icon-name">el-icon-sell</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-present"></i>
        <span class="icon-name">el-icon-present</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-box"></i>
        <span class="icon-name">el-icon-box</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bank-card"></i>
        <span class="icon-name">el-icon-bank-card</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-money"></i>
        <span class="icon-name">el-icon-money</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-coin"></i>
        <span class="icon-name">el-icon-coin</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-wallet"></i>
        <span class="icon-name">el-icon-wallet</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-discount"></i>
        <span class="icon-name">el-icon-discount</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-price-tag"></i>
        <span class="icon-name">el-icon-price-tag</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-news"></i>
        <span class="icon-name">el-icon-news</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-guide"></i>
        <span class="icon-name">el-icon-guide</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-male"></i>
        <span class="icon-name">el-icon-male</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-female"></i>
        <span class="icon-name">el-icon-female</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-thumb"></i>
        <span class="icon-name">el-icon-thumb</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-cpu"></i>
        <span class="icon-name">el-icon-cpu</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-link"></i>
        <span class="icon-name">el-icon-link</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-connection"></i>
        <span class="icon-name">el-icon-connection</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-open"></i>
        <span class="icon-name">el-icon-open</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-turn-off"></i>
        <span class="icon-name">el-icon-turn-off</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-set-up"></i>
        <span class="icon-name">el-icon-set-up</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chat-round"></i>
        <span class="icon-name">el-icon-chat-round</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chat-line-round"></i>
        <span class="icon-name">el-icon-chat-line-round</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chat-square"></i>
        <span class="icon-name">el-icon-chat-square</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chat-dot-round"></i>
        <span class="icon-name">el-icon-chat-dot-round</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chat-dot-square"></i>
        <span class="icon-name">el-icon-chat-dot-square</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chat-line-square"></i>
        <span class="icon-name">el-icon-chat-line-square</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-message"></i>
        <span class="icon-name">el-icon-message</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-postcard"></i>
        <span class="icon-name">el-icon-postcard</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-position"></i>
        <span class="icon-name">el-icon-position</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-turn-off-microphone"></i>
        <span class="icon-name">el-icon-turn-off-microphone</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-microphone"></i>
        <span class="icon-name">el-icon-microphone</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-close-notification"></i>
        <span class="icon-name">el-icon-close-notification</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bangzhu"></i>
        <span class="icon-name">el-icon-bangzhu</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-time"></i>
        <span class="icon-name">el-icon-time</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-odometer"></i>
        <span class="icon-name">el-icon-odometer</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-crop"></i>
        <span class="icon-name">el-icon-crop</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-aim"></i>
        <span class="icon-name">el-icon-aim</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-switch-button"></i>
        <span class="icon-name">el-icon-switch-button</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-full-screen"></i>
        <span class="icon-name">el-icon-full-screen</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-copy-document"></i>
        <span class="icon-name">el-icon-copy-document</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-mic"></i>
        <span class="icon-name">el-icon-mic</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-stopwatch"></i>
        <span class="icon-name">el-icon-stopwatch</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-medal-1"></i>
        <span class="icon-name">el-icon-medal-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-medal"></i>
        <span class="icon-name">el-icon-medal</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-trophy"></i>
        <span class="icon-name">el-icon-trophy</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-trophy-1"></i>
        <span class="icon-name">el-icon-trophy-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-first-aid-kit"></i>
        <span class="icon-name">el-icon-first-aid-kit</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-discover"></i>
        <span class="icon-name">el-icon-discover</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-place"></i>
        <span class="icon-name">el-icon-place</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-location"></i>
        <span class="icon-name">el-icon-location</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-location-outline"></i>
        <span class="icon-name">el-icon-location-outline</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-location-information"></i>
        <span class="icon-name">el-icon-location-information</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-add-location"></i>
        <span class="icon-name">el-icon-add-location</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-delete-location"></i>
        <span class="icon-name">el-icon-delete-location</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-map-location"></i>
        <span class="icon-name">el-icon-map-location</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-alarm-clock"></i>
        <span class="icon-name">el-icon-alarm-clock</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-timer"></i>
        <span class="icon-name">el-icon-timer</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-watch-1"></i>
        <span class="icon-name">el-icon-watch-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-watch"></i>
        <span class="icon-name">el-icon-watch</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-lock"></i>
        <span class="icon-name">el-icon-lock</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-unlock"></i>
        <span class="icon-name">el-icon-unlock</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-key"></i>
        <span class="icon-name">el-icon-key</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-service"></i>
        <span class="icon-name">el-icon-service</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-mobile-phone"></i>
        <span class="icon-name">el-icon-mobile-phone</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-bicycle"></i>
        <span class="icon-name">el-icon-bicycle</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-truck"></i>
        <span class="icon-name">el-icon-truck</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-ship"></i>
        <span class="icon-name">el-icon-ship</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-basketball"></i>
        <span class="icon-name">el-icon-basketball</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-football"></i>
        <span class="icon-name">el-icon-football</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-soccer"></i>
        <span class="icon-name">el-icon-soccer</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-baseball"></i>
        <span class="icon-name">el-icon-baseball</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-wind-power"></i>
        <span class="icon-name">el-icon-wind-power</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-light-rain"></i>
        <span class="icon-name">el-icon-light-rain</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-lightning"></i>
        <span class="icon-name">el-icon-lightning</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-heavy-rain"></i>
        <span class="icon-name">el-icon-heavy-rain</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sunrise"></i>
        <span class="icon-name">el-icon-sunrise</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sunrise-1"></i>
        <span class="icon-name">el-icon-sunrise-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sunset"></i>
        <span class="icon-name">el-icon-sunset</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sunny"></i>
        <span class="icon-name">el-icon-sunny</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-cloudy"></i>
        <span class="icon-name">el-icon-cloudy</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-partly-cloudy"></i>
        <span class="icon-name">el-icon-partly-cloudy</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-cloudy-and-sunny"></i>
        <span class="icon-name">el-icon-cloudy-and-sunny</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-moon"></i>
        <span class="icon-name">el-icon-moon</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-moon-night"></i>
        <span class="icon-name">el-icon-moon-night</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-dish"></i>
        <span class="icon-name">el-icon-dish</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-dish-1"></i>
        <span class="icon-name">el-icon-dish-1</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-food"></i>
        <span class="icon-name">el-icon-food</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-chicken"></i>
        <span class="icon-name">el-icon-chicken</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-fork-spoon"></i>
        <span class="icon-name">el-icon-fork-spoon</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-knife-fork"></i>
        <span class="icon-name">el-icon-knife-fork</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-burger"></i>
        <span class="icon-name">el-icon-burger</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-tableware"></i>
        <span class="icon-name">el-icon-tableware</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-sugar"></i>
        <span class="icon-name">el-icon-sugar</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-dessert"></i>
        <span class="icon-name">el-icon-dessert</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-ice-cream"></i>
        <span class="icon-name">el-icon-ice-cream</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-hot-water"></i>
        <span class="icon-name">el-icon-hot-water</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-water-cup"></i>
        <span class="icon-name">el-icon-water-cup</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-coffee-cup"></i>
        <span class="icon-name">el-icon-coffee-cup</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-cold-drink"></i>
        <span class="icon-name">el-icon-cold-drink</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-goblet"></i>
        <span class="icon-name">el-icon-goblet</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-goblet-full"></i>
        <span class="icon-name">el-icon-goblet-full</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-goblet-square"></i>
        <span class="icon-name">el-icon-goblet-square</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-goblet-square-full"></i>
        <span class="icon-name">el-icon-goblet-square-full</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-refrigerator"></i>
        <span class="icon-name">el-icon-refrigerator</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-grape"></i>
        <span class="icon-name">el-icon-grape</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-watermelon"></i>
        <span class="icon-name">el-icon-watermelon</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-cherry"></i>
        <span class="icon-name">el-icon-cherry</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-apple"></i>
        <span class="icon-name">el-icon-apple</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-pear"></i>
        <span class="icon-name">el-icon-pear</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-orange"></i>
        <span class="icon-name">el-icon-orange</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-coffee"></i>
        <span class="icon-name">el-icon-coffee</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-ice-tea"></i>
        <span class="icon-name">el-icon-ice-tea</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-ice-drink"></i>
        <span class="icon-name">el-icon-ice-drink</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-milk-tea"></i>
        <span class="icon-name">el-icon-milk-tea</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-potato-strips"></i>
        <span class="icon-name">el-icon-potato-strips</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-lollipop"></i>
        <span class="icon-name">el-icon-lollipop</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-ice-cream-square"></i>
        <span class="icon-name">el-icon-ice-cream-square</span>
      </span>
    </li>
    <li>
      <span>
        <i class="el-icon-ice-cream-round"></i>
        <span class="icon-name">el-icon-ice-cream-round</span>
      </span>
    </li>
  </ul>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
ul.icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border: 1px solid #eaeefb;
  border-radius: 4px;
  margin: 10px 0;
  font-size: 14px;
  color: #5e6d82;
  line-height: 2em;
  li {
    float: left;
    width: 10%;
    text-align: center;
    height: 120px;
    line-height: 120px;
    color: #666;
    font-size: 13px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-right: -1px;
    margin-bottom: -1px;
    span {
      line-height: normal;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, SimSun, sans-serif;
      color: #99a9bf;
      transition: color 0.15s linear;
      display: inline-block;
      vertical-align: middle;
    }
    i {
      display: block;
      font-size: 32px;
      margin-bottom: 15px;
      color: #606266;
      transition: color 0.15s linear;
    }
    .icon-name {
      display: inline-block;
      padding: 0 3px;
      height: 1em;
    }
    :hover {
      i,
      span {
        color: #5cb6ff;
      }
    }
  }
}
@media only screen and (max-width: 1280px) {
  .icon-list li {
    width: 16.66% !important;
  }
}
</style>