<template>
  <div data-v-394040b0 class="icons">
    <div @click="select(index)" v-for="(item,index) in icons" :key="index" class="icons-item">
      <i
        :class="['ivu-icon ivu-icon-'+item,selectIndex == index?'active':'']"
        style="font-size: 32px;"
      ></i>
      <p>{{item}}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    onSelect: {
      type: Function,
      default: () => {
        return "";
      }
    }
  },
  methods: {
    select(index) {
      this.selectIndex = index;
      this.onSelect(index < 0 ? "" : this.icons[index]);
    }
  },
  data() {
    return {
      selectIndex: -1,
      icons: [
        //ivu-icon ivu-icon-ios-add
        "ios-add",
        "md-add",
        "ios-add-circle",
        "ios-add-circle-outline",
        "md-add-circle",
        "ios-alarm",
        "ios-alarm-outline",
        "md-alarm",
        "ios-albums",
        "ios-albums-outline",
        "md-albums",
        "ios-alert",
        "ios-alert-outline",
        "md-alert",
        "ios-american-football",
        "md-american-football",
        "ios-analytics",
        "ios-analytics-outline",
        "md-analytics",
        "logo-android",
        "logo-angular",
        "ios-aperture",
        "ios-aperture-outline",
        "md-aperture",
        "logo-apple",
        "ios-apps",
        "ios-apps-outline",
        "md-apps",
        "ios-appstore",
        "ios-appstore-outline",
        "md-appstore",
        "ios-archive",
        "ios-archive-outline",
        "md-archive",
        "ios-arrow-back",
        "md-arrow-back",
        "ios-arrow-down",
        "md-arrow-down",
        "ios-arrow-dropdown",
        "md-arrow-dropdown",
        "ios-arrow-dropleft",
        "md-arrow-dropleft",
        "ios-arrow-dropright",
        "md-arrow-dropright",
        "ios-arrow-dropup",
        "md-arrow-dropup",
        "ios-arrow-dropup-circle",
        "md-arrow-dropup-circle",
        "ios-arrow-forward",
        "md-arrow-forward",
        "ios-arrow-round-back",
        "md-arrow-round-back",
        "ios-arrow-round-down",
        "md-arrow-round-down",
        "ios-arrow-round-forward",
        "md-arrow-round-forward",
        "ios-arrow-round-up",
        "md-arrow-round-up",
        "ios-arrow-up",
        "md-arrow-up",
        "ios-at",
        "ios-at-outline",
        "md-at",
        "ios-attach",
        "md-attach",
        "ios-backspace",
        "ios-backspace-outline",
        "md-backspace",
        "ios-barcode",
        "ios-barcode-outline",
        "md-barcode",
        "ios-baseball",
        "ios-baseball-outline",
        "md-baseball",
        "ios-basket",
        "ios-basket-outline",
        "md-basket",
        "ios-basketball",
        "ios-basketball-outline",
        "md-basketball",
        "ios-battery-charging",
        "md-battery-charging",
        "ios-battery-dead",
        "md-battery-dead",
        "ios-battery-full",
        "md-battery-full",
        "ios-beaker",
        "ios-beaker-outline",
        "md-beaker",
        "ios-beer",
        "ios-beer-outline",
        "md-beer",
        "ios-bicycle",
        "md-bicycle",
        "logo-bitcoin",
        "ios-bluetooth",
        "md-bluetooth",
        "ios-boat",
        "ios-boat-outline",
        "md-boat",
        "ios-body",
        "ios-body-outline",
        "md-body",
        "ios-bonfire",
        "ios-bonfire-outline",
        "md-bonfire",
        "ios-book",
        "ios-book-outline",
        "md-book",
        "ios-bookmark",
        "ios-bookmark-outline",
        "md-bookmark",
        "ios-bookmarks",
        "ios-bookmarks-outline",
        "md-bookmarks",
        "ios-bowtie",
        "ios-bowtie-outline",
        "md-bowtie",
        "ios-briefcase",
        "ios-briefcase-outline",
        "md-briefcase",
        "ios-browsers",
        "ios-browsers-outline",
        "md-browsers",
        "ios-brush",
        "ios-brush-outline",
        "md-brush",
        "logo-buffer",
        "ios-bug",
        "ios-bug-outline",
        "md-bug",
        "ios-build",
        "ios-build-outline",
        "md-build",
        "ios-bulb",
        "ios-bulb-outline",
        "md-bulb",
        "ios-bus",
        "ios-bus-outline",
        "md-bus",
        "ios-cafe",
        "ios-cafe-outline",
        "md-cafe",
        "ios-calculator",
        "ios-calculator-outline",
        "md-calculator",
        "ios-calendar",
        "ios-calendar-outline",
        "md-calendar",
        "ios-call",
        "ios-call-outline",
        "md-call",
        "ios-camera",
        "ios-camera-outline",
        "md-camera",
        "ios-car",
        "ios-car-outline",
        "md-car",
        "ios-card",
        "ios-card-outline",
        "md-card",
        "ios-cart",
        "ios-cart-outline",
        "md-cart",
        "ios-cash",
        "ios-cash-outline",
        "md-cash",
        "ios-chatboxes",
        "ios-chatboxes-outline",
        "md-chatboxes",
        "ios-chatbubbles",
        "ios-chatbubbles-outline",
        "md-chatbubbles",
        "ios-checkbox",
        "ios-checkbox-outline",
        "md-checkbox",
        "md-checkbox-outline",
        "ios-checkmark",
        "md-checkmark",
        "ios-checkmark-circle",
        "md-checkmark-circle",
        "logo-chrome",
        "ios-clipboard",
        "ios-clipboard-outline",
        "md-clipboard",
        "ios-clock",
        "ios-clock-outline",
        "md-clock",
        "ios-close",
        "md-close",
        "ios-close-circle",
        "md-close-circle",
        "ios-closed-captioning",
        "md-closed-captioning",
        "ios-cloud",
        "ios-cloud-outline",
        "md-cloud",
        "ios-cloud-circle",
        "md-cloud-circle",
        "ios-cloud-done",
        "ios-cloud-done-outline",
        "md-cloud-done",
        "ios-cloud-download",
        "md-cloud-download",
        "md-cloud-outline",
        "ios-cloud-upload",
        "md-cloud-upload",
        "ios-cloudy",
        "ios-cloudy-outline",
        "md-cloudy",
        "ios-cloudy-night",
        "md-cloudy-night",
        "ios-code",
        "md-code",
        "ios-code-download",
        "md-code-download",
        "ios-code-working",
        "md-code-working",
        "logo-codepen",
        "ios-cog",
        "ios-cog-outline",
        "md-cog",
        "ios-color-fill",
        "ios-color-fill-outline",
        "md-color-fill",
        "ios-color-filter",
        "md-color-filter",
        "ios-color-palette",
        "md-color-palette",
        "ios-color-wand",
        "ios-color-wand-outline",
        "md-color-wand",
        "ios-compass",
        "ios-compass-outline",
        "md-compass",
        "ios-construct",
        "ios-construct-outline",
        "md-construct",
        "ios-contact",
        "ios-contact-outline",
        "md-contact",
        "ios-contacts",
        "ios-contacts-outline",
        "md-contacts",
        "ios-contract",
        "md-contract",
        "ios-contrast",
        "md-contrast",
        "ios-copy",
        "ios-copy-outline",
        "md-copy",
        "ios-create",
        "ios-create-outline",
        "md-create",
        "ios-crop",
        "ios-crop-outline",
        "md-crop",
        "logo-css3",
        "ios-cube",
        "ios-cube-outline",
        "md-cube",
        "ios-cut",
        "ios-cut-outline",
        "md-cut",
        "logo-designernews",
        "ios-desktop",
        "ios-desktop-outline",
        "md-desktop",
        "ios-disc",
        "ios-disc-outline",
        "md-disc",
        "ios-document",
        "ios-document-outline",
        "md-document",
        "ios-done-all",
        "md-done-all",
        "ios-download",
        "ios-download-outline",
        "md-download",
        "logo-dribbble",
        "logo-dropbox",
        "ios-easel",
        "ios-easel-outline",
        "md-easel",
        "ios-egg",
        "ios-egg-outline",
        "md-egg",
        "logo-euro",
        "ios-exit",
        "ios-exit-outline",
        "md-exit",
        "ios-expand",
        "md-expand",
        "ios-eye",
        "ios-eye-outline",
        "md-eye",
        "ios-eye-off",
        "ios-eye-off-outline",
        "md-eye-off",
        "logo-facebook",
        "ios-fastforward",
        "ios-fastforward-outline",
        "md-fastforward",
        "ios-female",
        "md-female",
        "ios-filing",
        "ios-filing-outline",
        "md-filing",
        "ios-film",
        "ios-film-outline",
        "md-film",
        "ios-finger-print",
        "md-finger-print",
        "ios-flag",
        "ios-flag-outline",
        "md-flag",
        "ios-flame",
        "ios-flame-outline",
        "md-flame",
        "ios-flash",
        "ios-flash-outline",
        "md-flash",
        "ios-flask",
        "ios-flask-outline",
        "md-flask",
        "ios-flower",
        "ios-flower-outline",
        "md-flower",
        "ios-folder",
        "ios-folder-outline",
        "md-folder",
        "ios-folder-open",
        "ios-folder-open-outline",
        "md-folder-open",
        "ios-football",
        "ios-football-outline",
        "md-football",
        "logo-foursquare",
        "logo-freebsd-devil",
        "ios-funnel",
        "ios-funnel-outline",
        "md-funnel",
        "ios-game-controller-a",
        "md-game-controller-a",
        "ios-game-controller-b",
        "md-game-controller-b",
        "ios-git-branch",
        "md-git-branch",
        "ios-git-commit",
        "md-git-commit",
        "ios-git-compare",
        "md-git-compare",
        "ios-git-merge",
        "md-git-merge",
        "ios-git-network",
        "md-git-network",
        "ios-git-pull-request",
        "md-git-pull-request",
        "logo-github",
        "ios-glasses",
        "ios-glasses-outline",
        "md-glasses",
        "ios-globe",
        "ios-globe-outline",
        "md-globe",
        "logo-google",
        "logo-googleplus",
        "ios-grid",
        "ios-grid-outline",
        "md-grid",
        "logo-hackernews",
        "ios-hammer",
        "ios-hammer-outline",
        "md-hammer",
        "ios-hand",
        "ios-hand-outline",
        "md-hand",
        "ios-happy",
        "ios-happy-outline",
        "md-happy",
        "ios-headset",
        "ios-headset-outline",
        "md-headset",
        "ios-heart",
        "ios-heart-outline",
        "md-heart",
        "md-heart-outline",
        "ios-help",
        "md-help",
        "ios-help-buoy",
        "ios-help-buoy-outline",
        "md-help-buoy",
        "ios-help-circle",
        "ios-help-circle-outline",
        "md-help-circle",
        "ios-home",
        "ios-home-outline",
        "md-home",
        "logo-html5",
        "ios-ice-cream",
        "ios-ice-cream-outline",
        "md-ice-cream",
        "ios-image",
        "ios-image-outline",
        "md-image",
        "ios-images",
        "ios-images-outline",
        "md-images",
        "ios-infinite",
        "ios-infinite-outline",
        "md-infinite",
        "ios-information",
        "md-information",
        "ios-information-circle",
        "md-information-circle",
        "logo-instagram",
        "ios-ionic",
        "ios-ionic-outline",
        "md-ionic",
        "ios-ionitron",
        "ios-ionitron-outline",
        "md-ionitron",
        "logo-javascript",
        "ios-jet",
        "ios-jet-outline",
        "md-jet",
        "ios-key",
        "ios-key-outline",
        "md-key",
        "ios-keypad",
        "ios-keypad-outline",
        "md-keypad",
        "ios-laptop",
        "md-laptop",
        "ios-leaf",
        "ios-leaf-outline",
        "md-leaf",
        "ios-link",
        "ios-link-outline",
        "md-link",
        "logo-linkedin",
        "ios-list",
        "md-list",
        "ios-list-box",
        "ios-list-box-outline",
        "md-list-box",
        "ios-locate",
        "ios-locate-outline",
        "md-locate",
        "ios-lock",
        "ios-lock-outline",
        "md-lock",
        "ios-log-in",
        "md-log-in",
        "ios-log-out",
        "md-log-out",
        "ios-magnet",
        "ios-magnet-outline",
        "md-magnet",
        "ios-mail",
        "ios-mail-outline",
        "md-mail",
        "ios-mail-open",
        "ios-mail-open-outline",
        "md-mail-open",
        "ios-male",
        "md-male",
        "ios-man",
        "ios-man-outline",
        "md-man",
        "ios-map",
        "ios-map-outline",
        "md-map",
        "logo-markdown",
        "ios-medal",
        "ios-medal-outline",
        "md-medal",
        "ios-medical",
        "ios-medical-outline",
        "md-medical",
        "ios-medkit",
        "ios-medkit-outline",
        "md-medkit",
        "ios-megaphone",
        "ios-megaphone-outline",
        "md-megaphone",
        "ios-menu",
        "ios-menu-outline",
        "md-menu",
        "ios-mic",
        "ios-mic-outline",
        "md-mic",
        "ios-mic-off",
        "ios-mic-off-outline",
        "md-mic-off",
        "ios-microphone",
        "ios-microphone-outline",
        "md-microphone",
        "ios-moon",
        "ios-moon-outline",
        "md-moon",
        "ios-more",
        "ios-more-outline",
        "md-more",
        "ios-move",
        "md-move",
        "ios-musical-note",
        "md-musical-note",
        "ios-musical-notes",
        "md-musical-notes",
        "ios-navigate",
        "ios-navigate-outline",
        "md-navigate",
        "ios-no-smoking",
        "ios-no-smoking-outline",
        "md-no-smoking",
        "logo-nodejs",
        "ios-notifications",
        "md-notifications",
        "ios-notifications-off",
        "md-notifications-off",
        "ios-nuclear",
        "ios-nuclear-outline",
        "md-nuclear",
        "ios-nutrition",
        "ios-nutrition-outline",
        "md-nutrition",
        "logo-octocat",
        "ios-open",
        "ios-open-outline",
        "md-open",
        "ios-options",
        "ios-options-outline",
        "md-options",
        "ios-outlet",
        "ios-outlet-outline",
        "md-outlet",
        "ios-paper",
        "ios-paper-outline",
        "md-paper",
        "ios-paper-plane",
        "ios-paper-plane-outline",
        "md-paper-plane",
        "ios-partly-sunny",
        "md-partly-sunny",
        "ios-pause",
        "ios-pause-outline",
        "md-pause",
        "ios-paw",
        "ios-paw-outline",
        "md-paw",
        "ios-people",
        "ios-people-outline",
        "md-people",
        "ios-person",
        "ios-person-outline",
        "md-person",
        "ios-person-add",
        "ios-person-add-outline",
        "md-person-add",
        "ios-phone-landscape",
        "md-phone-landscape",
        "ios-phone-portrait",
        "md-phone-portrait",
        "ios-photos",
        "ios-photos-outline",
        "md-photos",
        "ios-pie",
        "ios-pie-outline",
        "md-pie",
        "ios-pin",
        "ios-pin-outline",
        "md-pin",
        "ios-pint",
        "ios-pint-outline",
        "md-pint",
        "logo-pinterest",
        "ios-pizza",
        "ios-pizza-outline",
        "md-pizza",
        "ios-plane",
        "ios-plane-outline",
        "md-plane",
        "ios-planet",
        "ios-planet-outline",
        "md-planet",
        "ios-play",
        "ios-play-outline",
        "md-play",
        "logo-playstation",
        "ios-podium",
        "ios-podium-outline",
        "md-podium",
        "ios-power",
        "ios-power-outline",
        "md-power",
        "ios-pricetag",
        "ios-pricetag-outline",
        "md-pricetag",
        "ios-pricetags",
        "ios-pricetags-outline",
        "md-pricetags",
        "ios-print",
        "ios-print-outline",
        "md-print",
        "ios-pulse",
        "ios-pulse-outline",
        "md-pulse",
        "logo-python",
        "ios-qr-scanner",
        "md-qr-scanner",
        "ios-quote",
        "ios-quote-outline",
        "md-quote",
        "ios-radio",
        "ios-radio-outline",
        "md-radio",
        "ios-radio-button-off",
        "md-radio-button-off",
        "ios-radio-button-on",
        "md-radio-button-on",
        "ios-rainy",
        "ios-rainy-outline",
        "md-rainy",
        "ios-recording",
        "ios-recording-outline",
        "md-recording",
        "logo-reddit",
        "ios-redo",
        "ios-redo-outline",
        "md-redo",
        "ios-refresh",
        "md-refresh",
        "ios-refresh-circle",
        "md-refresh-circle",
        "ios-remove",
        "md-remove",
        "ios-remove-circle",
        "md-remove-circle",
        "ios-reorder",
        "md-reorder",
        "ios-repeat",
        "md-repeat",
        "ios-resize",
        "md-resize",
        "ios-restaurant",
        "ios-restaurant-outline",
        "md-restaurant",
        "ios-return-left",
        "md-return-left",
        "ios-return-right",
        "md-return-right",
        "ios-reverse-camera",
        "md-reverse-camera",
        "ios-rewind",
        "ios-rewind-outline",
        "md-rewind",
        "ios-ribbon",
        "ios-ribbon-outline",
        "md-ribbon",
        "ios-rose",
        "ios-rose-outline",
        "md-rose",
        "logo-rss",
        "ios-sad",
        "ios-sad-outline",
        "md-sad",
        "logo-sass",
        "ios-school",
        "ios-school-outline",
        "md-school",
        "ios-search",
        "ios-search-outline",
        "md-search",
        "ios-send",
        "ios-send-outline",
        "md-send",
        "ios-settings",
        "ios-settings-outline",
        "md-settings",
        "ios-share",
        "ios-share-outline",
        "md-share",
        "ios-share-alt",
        "ios-share-alt-outline",
        "md-share-alt",
        "ios-shirt",
        "ios-shirt-outline",
        "md-shirt",
        "ios-shuffle",
        "md-shuffle",
        "ios-skip-backward",
        "md-skip-backward",
        "ios-skip-forward",
        "md-skip-forward",
        "logo-skype",
        "logo-snapchat",
        "ios-snow",
        "ios-snow-outline",
        "md-snow",
        "ios-speedometer",
        "ios-speedometer-outline",
        "md-speedometer",
        "ios-square",
        "ios-square-outline",
        "md-square",
        "md-square-outline",
        "ios-star",
        "ios-star-outline",
        "md-star",
        "ios-star-half",
        "md-star-half",
        "md-star-outline",
        "ios-stats",
        "ios-stats-outline",
        "md-stats",
        "logo-steam",
        "ios-stopwatch",
        "ios-stopwatch-outline",
        "md-stopwatch",
        "ios-subway",
        "ios-subway-outline",
        "md-subway",
        "ios-sunny",
        "ios-sunny-outline",
        "md-sunny",
        "ios-swap",
        "md-swap",
        "ios-switch",
        "ios-switch-outline",
        "md-switch",
        "ios-sync",
        "md-sync",
        "ios-tablet-landscape",
        "md-tablet-landscape",
        "ios-tablet-portrait",
        "md-tablet-portrait",
        "ios-tennisball",
        "ios-tennisball-outline",
        "md-tennisball",
        "ios-text",
        "ios-text-outline",
        "md-text",
        "ios-thermometer",
        "ios-thermometer-outline",
        "md-thermometer",
        "ios-thumbs-down",
        "ios-thumbs-down-outline",
        "md-thumbs-down",
        "ios-thumbs-up",
        "ios-thumbs-up-outline",
        "md-thumbs-up",
        "ios-thunderstorm",
        "md-thunderstorm",
        "ios-time",
        "ios-time-outline",
        "md-time",
        "ios-timer",
        "ios-timer-outline",
        "md-timer",
        "ios-train",
        "ios-train-outline",
        "md-train",
        "ios-transgender",
        "md-transgender",
        "ios-trash",
        "ios-trash-outline",
        "md-trash",
        "ios-trending-down",
        "md-trending-down",
        "ios-trending-up",
        "md-trending-up",
        "ios-trophy",
        "ios-trophy-outline",
        "md-trophy",
        "logo-tumblr",
        "logo-tux",
        "logo-twitch",
        "logo-twitter",
        "ios-umbrella",
        "ios-umbrella-outline",
        "md-umbrella",
        "ios-undo",
        "ios-undo-outline",
        "md-undo",
        "ios-unlock",
        "ios-unlock-outline",
        "md-unlock",
        "logo-usd",
        "ios-videocam",
        "ios-videocam-outline",
        "md-videocam",
        "logo-vimeo",
        "ios-volume-down",
        "md-volume-down",
        "ios-volume-mute",
        "md-volume-mute",
        "ios-volume-off",
        "md-volume-off",
        "ios-volume-up",
        "md-volume-up",
        "ios-walk",
        "md-walk",
        "ios-warning",
        "ios-warning-outline",
        "md-warning",
        "ios-watch",
        "md-watch",
        "ios-water",
        "ios-water-outline",
        "md-water",
        "logo-whatsapp",
        "ios-wifi",
        "ios-wifi-outline",
        "md-wifi",
        "logo-windows",
        "ios-wine",
        "ios-wine-outline",
        "md-wine",
        "ios-woman",
        "ios-woman-outline",
        "md-woman",
        "logo-wordpress",
        "logo-xbox",
        "logo-yahoo",
        "logo-yen",
        "logo-youtube",
        "ios-loading"
      ]
    };
  }
};
</script>


<style lang="less" scoped>
.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 115px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 100px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.active {
  border: 1px solid;
  background: #f44336;
  color: white;
  font-size: 32px;
}
</style>