<template> <div id="remix-icon-picker"> <div id="icon-dropdown" class="btn btn-outline-secondary btn-sm" @click="showModal"> <i :class="currentIcon"></i> </div> <div id="ri-modal" :style="modalStyle" @click.self="hideModal"> <div id="ri-selector"> <i id="selected-icon" :class="currentIcon"></i> <div class="ri-search-box"> <input type="text" v-model="q" class="form-control text-center" placeholder="search..." > </div> <div class="icon-list"> <template v-for="i in icons"> <i :class="i" v-if="i.indexOf(q) !== -1" @click="selecting(i)"></i> </template> </div> </div> </div> <!-- <br>--> <input type="hidden" :name="xname" v-model="currentIcon"> </div> </template> <script> export default { name: "remix-icon-picker", components: {}, data: () => { return { currentIcon:'', icons:[ "ri-folder-line", "ri-arrow-left-up-line", "ri-arrow-left-up-fill", "ri-arrow-up-line", "ri-arrow-up-fill", "ri-arrow-right-up-line", "ri-arrow-right-up-fill", "ri-arrow-right-line", "ri-arrow-right-fill", "ri-arrow-right-down-line", "ri-arrow-right-down-fill", "ri-arrow-down-line", "ri-arrow-down-fill", "ri-arrow-left-down-line", "ri-arrow-left-down-fill", "ri-arrow-left-line", "ri-arrow-left-fill", "ri-corner-right-up-line", "ri-corner-right-up-fill", "ri-corner-up-left-line", "ri-corner-up-left-fill", "ri-corner-up-right-line", "ri-corner-up-right-fill", "ri-corner-right-down-line", "ri-corner-right-down-fill", "ri-corner-down-left-line", "ri-corner-down-left-fill", "ri-corner-left-up-line", "ri-corner-left-up-fill", "ri-corner-left-down-line", "ri-corner-left-down-fill", "ri-corner-down-right-line", "ri-corner-down-right-fill", "ri-arrow-up-circle-line", "ri-arrow-up-circle-fill", "ri-arrow-right-circle-line", "ri-arrow-right-circle-fill", "ri-arrow-down-circle-line", "ri-arrow-down-circle-fill", "ri-arrow-left-circle-line", "ri-arrow-left-circle-fill", "ri-arrow-up-s-line", "ri-arrow-up-s-fill", "ri-arrow-right-s-line", "ri-arrow-right-s-fill", "ri-arrow-down-s-line", "ri-arrow-down-s-fill", "ri-arrow-left-s-line", "ri-arrow-left-s-fill", "ri-skip-up-line", "ri-skip-up-fill", "ri-skip-right-line", "ri-skip-right-fill", "ri-skip-down-line", "ri-skip-down-fill", "ri-skip-left-line", "ri-skip-left-fill", "ri-arrow-left-right-line", "ri-arrow-left-right-fill", "ri-arrow-up-down-line", "ri-arrow-up-down-fill", "ri-arrow-drop-up-line", "ri-arrow-drop-up-fill", "ri-arrow-drop-right-line", "ri-arrow-drop-right-fill", "ri-arrow-drop-down-line", "ri-arrow-drop-down-fill", "ri-arrow-drop-left-line", "ri-arrow-drop-left-fill", "ri-arrow-up-double-line", "ri-arrow-up-double-fill", "ri-arrow-right-double-line", "ri-arrow-right-double-fill", "ri-arrow-down-double-line", "ri-arrow-down-double-fill", "ri-arrow-left-double-line", "ri-arrow-left-double-fill", "ri-corner-up-left-double-line", "ri-corner-up-left-double-fill", "ri-corner-up-right-double-line", "ri-corner-up-right-double-fill", "ri-expand-left-line", "ri-expand-left-fill", "ri-expand-right-line", "ri-expand-right-fill", "ri-contract-left-line", "ri-contract-left-fill", "ri-contract-right-line", "ri-contract-right-fill", "ri-expand-up-down-line", "ri-expand-up-down-fill", "ri-expand-left-right-line", "ri-expand-left-right-fill", "ri-contract-up-down-line", "ri-contract-up-down-fill", "ri-contract-left-right-line", "ri-contract-left-right-fill", "ri-drag-move-2-line", "ri-drag-move-2-fill", "ri-drag-move-line", "ri-drag-move-fill", "ri-arrow-go-back-line", "ri-arrow-go-back-fill", "ri-arrow-go-forward-line", "ri-arrow-go-forward-fill", "ri-arrow-turn-forward-line", "ri-arrow-turn-forward-fill", "ri-arrow-turn-back-line", "ri-arrow-turn-back-fill", "ri-home-line", "ri-home-fill", "ri-home-2-line", "ri-home-2-fill", "ri-home-3-line", "ri-home-3-fill", "ri-home-4-line", "ri-home-4-fill", "ri-home-5-line", "ri-home-5-fill", "ri-home-6-line", "ri-home-6-fill", "ri-home-7-line", "ri-home-7-fill", "ri-home-8-line", "ri-home-8-fill", "ri-home-gear-line", "ri-home-gear-fill", "ri-home-wifi-line", "ri-home-wifi-fill", "ri-home-smile-line", "ri-home-smile-fill", "ri-home-smile-2-line", "ri-home-smile-2-fill", "ri-home-heart-line", "ri-home-heart-fill", "ri-home-office-line", "ri-home-office-fill", "ri-building-line", "ri-building-fill", "ri-building-2-line", "ri-building-2-fill", "ri-building-3-line", "ri-building-3-fill", "ri-building-4-line", "ri-building-4-fill", "ri-hotel-line", "ri-hotel-fill", "ri-community-line", "ri-community-fill", "ri-school-line", "ri-school-fill", "ri-government-line", "ri-government-fill", "ri-bank-line", "ri-bank-fill", "ri-store-line", "ri-store-fill", "ri-store-2-line", "ri-store-2-fill", "ri-store-3-line", "ri-store-3-fill", "ri-hospital-line", "ri-hospital-fill", "ri-ancient-gate-line", "ri-ancient-gate-fill", "ri-ancient-pavilion-line", "ri-ancient-pavilion-fill", "ri-tent-line", "ri-tent-fill", "ri-mail-line", "ri-mail-fill", "ri-mail-open-line", "ri-mail-open-fill", "ri-mail-send-line", "ri-mail-send-fill", "ri-mail-unread-line", "ri-mail-unread-fill", "ri-mail-add-line", "ri-mail-add-fill", "ri-mail-check-line", "ri-mail-check-fill", "ri-mail-close-line", "ri-mail-close-fill", "ri-mail-download-line", "ri-mail-download-fill", "ri-mail-forbid-line", "ri-mail-forbid-fill", "ri-mail-lock-line", "ri-mail-lock-fill", "ri-mail-settings-line", "ri-mail-settings-fill", "ri-mail-star-line", "ri-mail-star-fill", "ri-mail-volume-line", "ri-mail-volume-fill", "ri-inbox-line", "ri-inbox-fill", "ri-inbox-2-line", "ri-inbox-2-fill", "ri-inbox-archive-line", "ri-inbox-archive-fill", "ri-inbox-unarchive-line", "ri-inbox-unarchive-fill", "ri-cloud-line", "ri-cloud-fill", "ri-cloud-off-line", "ri-cloud-off-fill", "ri-attachment-line", "ri-attachment-fill", "ri-profile-line", "ri-profile-fill", "ri-archive-line", "ri-archive-fill", "ri-archive-2-line", "ri-archive-2-fill", "ri-archive-drawer-line", "ri-archive-drawer-fill", "ri-at-line", "ri-at-fill", "ri-award-line", "ri-award-fill", "ri-medal-line", "ri-medal-fill", "ri-medal-2-line", "ri-medal-2-fill", "ri-verified-badge-line", "ri-verified-badge-fill", "ri-bar-chart-line", "ri-bar-chart-fill", "ri-bar-chart-horizontal-line", "ri-bar-chart-horizontal-fill", "ri-bar-chart-2-line", "ri-bar-chart-2-fill", "ri-bar-chart-box-line", "ri-bar-chart-box-fill", "ri-bar-chart-grouped-line", "ri-bar-chart-grouped-fill", "ri-bubble-chart-line", "ri-bubble-chart-fill", "ri-pie-chart-line", "ri-pie-chart-fill", "ri-pie-chart-2-line", "ri-pie-chart-2-fill", "ri-pie-chart-box-line", "ri-pie-chart-box-fill", "ri-donut-chart-line", "ri-donut-chart-fill", "ri-line-chart-line", "ri-line-chart-fill", "ri-bookmark-line", "ri-bookmark-fill", "ri-bookmark-2-line", "ri-bookmark-2-fill", "ri-bookmark-3-line", "ri-bookmark-3-fill", "ri-briefcase-line", "ri-briefcase-fill", "ri-briefcase-2-line", "ri-briefcase-2-fill", "ri-briefcase-3-line", "ri-briefcase-3-fill", "ri-briefcase-4-line", "ri-briefcase-4-fill", "ri-briefcase-5-line", "ri-briefcase-5-fill", "ri-calculator-line", "ri-calculator-fill", "ri-calendar-line", "ri-calendar-fill", "ri-calendar-2-line", "ri-calendar-2-fill", "ri-calendar-event-line", "ri-calendar-event-fill", "ri-calendar-todo-line", "ri-calendar-todo-fill", "ri-calendar-check-line", "ri-calendar-check-fill", "ri-calendar-close-line", "ri-calendar-close-fill", "ri-calendar-schedule-line", "ri-calendar-schedule-fill", "ri-customer-service-line", "ri-customer-service-fill", "ri-customer-service-2-line", "ri-customer-service-2-fill", "ri-flag-line", "ri-flag-fill", "ri-flag-2-line", "ri-flag-2-fill", "ri-global-line", "ri-global-fill", "ri-honour-line", "ri-honour-fill", "ri-links-line", "ri-links-fill", "ri-printer-line", "ri-printer-fill", "ri-printer-cloud-line", "ri-printer-cloud-fill", "ri-record-mail-line", "ri-record-mail-fill", "ri-reply-line", "ri-reply-fill", "ri-reply-all-line", "ri-reply-all-fill", "ri-send-plane-line", "ri-send-plane-fill", "ri-send-plane-2-line", "ri-send-plane-2-fill", "ri-projector-line", "ri-projector-fill", "ri-projector-2-line", "ri-projector-2-fill", "ri-slideshow-line", "ri-slideshow-fill", "ri-slideshow-2-line", "ri-slideshow-2-fill", "ri-slideshow-3-line", "ri-slideshow-3-fill", "ri-slideshow-4-line", "ri-slideshow-4-fill", "ri-presentation-line", "ri-presentation-fill", "ri-window-line", "ri-window-fill", "ri-window-2-line", "ri-window-2-fill", "ri-stack-line", "ri-stack-fill", "ri-shake-hands-line", "ri-shake-hands-fill", "ri-service-line", "ri-service-fill", "ri-registered-line", "ri-registered-fill", "ri-trademark-line", "ri-trademark-fill", "ri-advertisement-line", "ri-advertisement-fill", "ri-copyleft-line", "ri-copyleft-fill", "ri-copyright-line", "ri-copyright-fill", "ri-creative-commons-line", "ri-creative-commons-fill", "ri-creative-commons-by-line", "ri-creative-commons-by-fill", "ri-creative-commons-nc-line", "ri-creative-commons-nc-fill", "ri-creative-commons-nd-line", "ri-creative-commons-nd-fill", "ri-creative-commons-sa-line", "ri-creative-commons-sa-fill", "ri-creative-commons-zero-line", "ri-creative-commons-zero-fill", "ri-megaphone-line", "ri-megaphone-fill", "ri-pass-valid-line", "ri-pass-valid-fill", "ri-pass-pending-line", "ri-pass-pending-fill", "ri-pass-expired-line", "ri-pass-expired-fill", "ri-seo-line", "ri-seo-fill", "ri-chat-1-line", "ri-chat-1-fill", "ri-chat-2-line", "ri-chat-2-fill", "ri-chat-3-line", "ri-chat-3-fill", "ri-chat-4-line", "ri-chat-4-fill", "ri-message-line", "ri-message-fill", "ri-message-2-line", "ri-message-2-fill", "ri-message-3-line", "ri-message-3-fill", "ri-chat-check-line", "ri-chat-check-fill", "ri-chat-delete-line", "ri-chat-delete-fill", "ri-chat-forward-line", "ri-chat-forward-fill", "ri-chat-upload-line", "ri-chat-upload-fill", "ri-chat-download-line", "ri-chat-download-fill", "ri-chat-new-line", "ri-chat-new-fill", "ri-chat-settings-line", "ri-chat-settings-fill", "ri-chat-smile-line", "ri-chat-smile-fill", "ri-chat-smile-2-line", "ri-chat-smile-2-fill", "ri-chat-smile-3-line", "ri-chat-smile-3-fill", "ri-chat-heart-line", "ri-chat-heart-fill", "ri-chat-off-line", "ri-chat-off-fill", "ri-feedback-line", "ri-feedback-fill", "ri-discuss-line", "ri-discuss-fill", "ri-question-answer-line", "ri-question-answer-fill", "ri-questionnaire-line", "ri-questionnaire-fill", "ri-video-chat-line", "ri-video-chat-fill", "ri-chat-voice-line", "ri-chat-voice-fill", "ri-chat-quote-line", "ri-chat-quote-fill", "ri-chat-follow-up-line", "ri-chat-follow-up-fill", "ri-chat-poll-line", "ri-chat-poll-fill", "ri-chat-history-line", "ri-chat-history-fill", "ri-chat-private-line", "ri-chat-private-fill", "ri-speak-line", "ri-speak-fill", "ri-emoji-sticker-line", "ri-emoji-sticker-fill", "ri-pencil-line", "ri-pencil-fill", "ri-edit-line", "ri-edit-fill", "ri-edit-2-line", "ri-edit-2-fill", "ri-ball-pen-line", "ri-ball-pen-fill", "ri-quill-pen-line", "ri-quill-pen-fill", "ri-pen-nib-line", "ri-pen-nib-fill", "ri-ink-bottle-line", "ri-ink-bottle-fill", "ri-mark-pen-line", "ri-mark-pen-fill", "ri-markup-line", "ri-markup-fill", "ri-edit-box-line", "ri-edit-box-fill", "ri-edit-circle-line", "ri-edit-circle-fill", "ri-sip-line", "ri-sip-fill", "ri-brush-line", "ri-brush-fill", "ri-brush-2-line", "ri-brush-2-fill", "ri-brush-3-line", "ri-brush-3-fill", "ri-brush-4-line", "ri-brush-4-fill", "ri-paint-brush-line", "ri-paint-brush-fill", "ri-contrast-line", "ri-contrast-fill", "ri-contrast-2-line", "ri-contrast-2-fill", "ri-drop-line", "ri-drop-fill", "ri-blur-off-line", "ri-blur-off-fill", "ri-contrast-drop-line", "ri-contrast-drop-fill", "ri-contrast-drop-2-line", "ri-contrast-drop-2-fill", "ri-compasses-line", "ri-compasses-fill", "ri-compasses-2-line", "ri-compasses-2-fill", "ri-scissors-line", "ri-scissors-fill", "ri-scissors-cut-line", "ri-scissors-cut-fill", "ri-scissors-2-line", "ri-scissors-2-fill", "ri-slice-line", "ri-slice-fill", "ri-eraser-line", "ri-eraser-fill", "ri-ruler-line", "ri-ruler-fill", "ri-ruler-2-line", "ri-ruler-2-fill", "ri-pencil-ruler-line", "ri-pencil-ruler-fill", "ri-pencil-ruler-2-line", "ri-pencil-ruler-2-fill", "ri-t-box-line", "ri-t-box-fill", "ri-input-method-line", "ri-input-method-fill", "ri-artboard-line", "ri-artboard-fill", "ri-artboard-2-line", "ri-artboard-2-fill", "ri-crop-line", "ri-crop-fill", "ri-crop-2-line", "ri-crop-2-fill", "ri-screenshot-line", "ri-screenshot-fill", "ri-screenshot-2-line", "ri-screenshot-2-fill", "ri-focus-line", "ri-focus-fill", "ri-focus-2-line", "ri-focus-2-fill", "ri-focus-3-line", "ri-focus-3-fill", "ri-crosshair-line", "ri-crosshair-fill", "ri-crosshair-2-line", "ri-crosshair-2-fill", "ri-paint-line", "ri-paint-fill", "ri-palette-line", "ri-palette-fill", "ri-pantone-line", "ri-pantone-fill", "ri-shape-line", "ri-shape-fill", "ri-shape-2-line", "ri-shape-2-fill", "ri-magic-line", "ri-magic-fill", "ri-anticlockwise-line", "ri-anticlockwise-fill", "ri-anticlockwise-2-line", "ri-anticlockwise-2-fill", "ri-clockwise-line", "ri-clockwise-fill", "ri-clockwise-2-line", "ri-clockwise-2-fill", "ri-hammer-line", "ri-hammer-fill", "ri-tools-line", "ri-tools-fill", "ri-drag-drop-line", "ri-drag-drop-fill", "ri-table-line", "ri-table-fill", "ri-table-alt-line", "ri-table-alt-fill", "ri-layout-line", "ri-layout-fill", "ri-layout-2-line", "ri-layout-2-fill", "ri-layout-3-line", "ri-layout-3-fill", "ri-layout-4-line", "ri-layout-4-fill", "ri-layout-5-line", "ri-layout-5-fill", "ri-layout-6-line", "ri-layout-6-fill", "ri-layout-column-line", "ri-layout-column-fill", "ri-layout-row-line", "ri-layout-row-fill", "ri-layout-top-line", "ri-layout-top-fill", "ri-layout-right-line", "ri-layout-right-fill", "ri-layout-bottom-line", "ri-layout-bottom-fill", "ri-layout-left-line", "ri-layout-left-fill", "ri-layout-top-2-line", "ri-layout-top-2-fill", "ri-layout-right-2-line", "ri-layout-right-2-fill", "ri-layout-bottom-2-line", "ri-layout-bottom-2-fill", "ri-layout-left-2-line", "ri-layout-left-2-fill", "ri-layout-grid-line", "ri-layout-grid-fill", "ri-layout-masonry-line", "ri-layout-masonry-fill", "ri-collage-line", "ri-collage-fill", "ri-grid-line", "ri-grid-fill", "ri-circle-line", "ri-circle-fill", "ri-triangle-line", "ri-triangle-fill", "ri-pentagon-line", "ri-pentagon-fill", "ri-hexagon-line", "ri-hexagon-fill", "ri-octagon-line", "ri-octagon-fill", "ri-square-line", "ri-square-fill", "ri-rectangle-line", "ri-rectangle-fill", "ri-shapes-line", "ri-shapes-fill", "ri-bug-line", "ri-bug-fill", "ri-bug-2-line", "ri-bug-2-fill", "ri-code-line", "ri-code-fill", "ri-code-s-line", "ri-code-s-fill", "ri-code-s-slash-line", "ri-code-s-slash-fill", "ri-code-box-line", "ri-code-box-fill", "ri-terminal-box-line", "ri-terminal-box-fill", "ri-terminal-line", "ri-terminal-fill", "ri-terminal-window-line", "ri-terminal-window-fill", "ri-parentheses-line", "ri-parentheses-fill", "ri-brackets-line", "ri-brackets-fill", "ri-braces-line", "ri-braces-fill", "ri-command-line", "ri-command-fill", "ri-cursor-line", "ri-cursor-fill", "ri-git-commit-line", "ri-git-commit-fill", "ri-git-pull-request-line", "ri-git-pull-request-fill", "ri-git-merge-line", "ri-git-merge-fill", "ri-git-branch-line", "ri-git-branch-fill", "ri-git-close-pull-request-line", "ri-git-close-pull-request-fill", "ri-git-repository-line", "ri-git-repository-fill", "ri-git-repository-commits-line", "ri-git-repository-commits-fill", "ri-git-repository-private-line", "ri-git-repository-private-fill", "ri-html5-line", "ri-html5-fill", "ri-css3-line", "ri-css3-fill", "ri-javascript-line", "ri-javascript-fill", "ri-tv-line", "ri-tv-fill", "ri-tv-2-line", "ri-tv-2-fill", "ri-computer-line", "ri-computer-fill", "ri-mac-line", "ri-mac-fill", "ri-macbook-line", "ri-macbook-fill", "ri-cellphone-line", "ri-cellphone-fill", "ri-smartphone-line", "ri-smartphone-fill", "ri-tablet-line", "ri-tablet-fill", "ri-device-line", "ri-device-fill", "ri-phone-line", "ri-phone-fill", "ri-instance-line", "ri-instance-fill", "ri-database-line", "ri-database-fill", "ri-database-2-line", "ri-database-2-fill", "ri-server-line", "ri-server-fill", "ri-hard-drive-line", "ri-hard-drive-fill", "ri-hard-drive-2-line", "ri-hard-drive-2-fill", "ri-hard-drive-3-line", "ri-hard-drive-3-fill", "ri-install-line", "ri-install-fill", "ri-uninstall-line", "ri-uninstall-fill", "ri-save-line", "ri-save-fill", "ri-save-2-line", "ri-save-2-fill", "ri-save-3-line", "ri-save-3-fill", "ri-sd-card-line", "ri-sd-card-fill", "ri-sd-card-mini-line", "ri-sd-card-mini-fill", "ri-sim-card-line", "ri-sim-card-fill", "ri-sim-card-2-line", "ri-sim-card-2-fill", "ri-dual-sim-1-line", "ri-dual-sim-1-fill", "ri-dual-sim-2-line", "ri-dual-sim-2-fill", "ri-u-disk-line", "ri-u-disk-fill", "ri-battery-line", "ri-battery-fill", "ri-battery-charge-line", "ri-battery-charge-fill", "ri-battery-low-line", "ri-battery-low-fill", "ri-battery-2-line", "ri-battery-2-fill", "ri-battery-2-charge-line", "ri-battery-2-charge-fill", "ri-battery-saver-line", "ri-battery-saver-fill", "ri-battery-share-line", "ri-battery-share-fill", "ri-cast-line", "ri-cast-fill", "ri-airplay-line", "ri-airplay-fill", "ri-cpu-line", "ri-cpu-fill", "ri-gradienter-line", "ri-gradienter-fill", "ri-keyboard-line", "ri-keyboard-fill", "ri-keyboard-box-line", "ri-keyboard-box-fill", "ri-mouse-line", "ri-mouse-fill", "ri-sensor-line", "ri-sensor-fill", "ri-router-line", "ri-router-fill", "ri-radar-line", "ri-radar-fill", "ri-gamepad-line", "ri-gamepad-fill", "ri-remote-control-line", "ri-remote-control-fill", "ri-remote-control-2-line", "ri-remote-control-2-fill", "ri-device-recover-line", "ri-device-recover-fill", "ri-hotspot-line", "ri-hotspot-fill", "ri-phone-find-line", "ri-phone-find-fill", "ri-phone-lock-line", "ri-phone-lock-fill", "ri-rotate-lock-line", "ri-rotate-lock-fill", "ri-restart-line", "ri-restart-fill", "ri-shut-down-line", "ri-shut-down-fill", "ri-fingerprint-line", "ri-fingerprint-fill", "ri-fingerprint-2-line", "ri-fingerprint-2-fill", "ri-barcode-line", "ri-barcode-fill", "ri-barcode-box-line", "ri-barcode-box-fill", "ri-qr-code-line", "ri-qr-code-fill", "ri-qr-scan-line", "ri-qr-scan-fill", "ri-qr-scan-2-line", "ri-qr-scan-2-fill", "ri-scan-line", "ri-scan-fill", "ri-scan-2-line", "ri-scan-2-fill", "ri-rss-line", "ri-rss-fill", "ri-gps-line", "ri-gps-fill", "ri-base-station-line", "ri-base-station-fill", "ri-bluetooth-line", "ri-bluetooth-fill", "ri-bluetooth-connect-line", "ri-bluetooth-connect-fill", "ri-wifi-line", "ri-wifi-fill", "ri-wifi-off-line", "ri-wifi-off-fill", "ri-signal-wifi-line", "ri-signal-wifi-fill", "ri-signal-wifi-1-line", "ri-signal-wifi-1-fill", "ri-signal-wifi-2-line", "ri-signal-wifi-2-fill", "ri-signal-wifi-3-line", "ri-signal-wifi-3-fill", "ri-signal-wifi-error-line", "ri-signal-wifi-error-fill", "ri-signal-wifi-off-line", "ri-signal-wifi-off-fill", "ri-wireless-charging-line", "ri-wireless-charging-fill", "ri-dashboard-2-line", "ri-dashboard-2-fill", "ri-dashboard-3-line", "ri-dashboard-3-fill", "ri-usb-line", "ri-usb-fill", "ri-rfid-line", "ri-rfid-fill", "ri-file-line", "ri-file-fill", "ri-file-2-line", "ri-file-2-fill", "ri-file-3-line", "ri-file-3-fill", "ri-file-4-line", "ri-file-4-fill", "ri-sticky-note-line", "ri-sticky-note-fill", "ri-sticky-note-2-line", "ri-sticky-note-2-fill", "ri-file-edit-line", "ri-file-edit-fill", "ri-draft-line", "ri-draft-fill", "ri-file-paper-line", "ri-file-paper-fill", "ri-file-paper-2-line", "ri-file-paper-2-fill", "ri-file-text-line", "ri-file-text-fill", "ri-file-list-line", "ri-file-list-fill", "ri-file-list-2-line", "ri-file-list-2-fill", "ri-file-list-3-line", "ri-file-list-3-fill", "ri-bill-line", "ri-bill-fill", "ri-file-copy-line", "ri-file-copy-fill", "ri-file-copy-2-line", "ri-file-copy-2-fill", "ri-clipboard-line", "ri-clipboard-fill", "ri-survey-line", "ri-survey-fill", "ri-article-line", "ri-article-fill", "ri-newspaper-line", "ri-newspaper-fill", "ri-news-line", "ri-news-fill", "ri-file-zip-line", "ri-file-zip-fill", "ri-file-mark-line", "ri-file-mark-fill", "ri-task-line", "ri-task-fill", "ri-todo-line", "ri-todo-fill", "ri-book-line", "ri-book-fill", "ri-book-mark-line", "ri-book-mark-fill", "ri-book-2-line", "ri-book-2-fill", "ri-book-3-line", "ri-book-3-fill", "ri-book-open-line", "ri-book-open-fill", "ri-book-read-line", "ri-book-read-fill", "ri-contacts-book-line", "ri-contacts-book-fill", "ri-contacts-book-2-line", "ri-contacts-book-2-fill", "ri-contacts-book-upload-line", "ri-contacts-book-upload-fill", "ri-booklet-line", "ri-booklet-fill", "ri-file-code-line", "ri-file-code-fill", "ri-file-pdf-line", "ri-file-pdf-fill", "ri-file-pdf-2-line", "ri-file-pdf-2-fill", "ri-file-word-line", "ri-file-word-fill", "ri-file-ppt-line", "ri-file-ppt-fill", "ri-file-excel-line", "ri-file-excel-fill", "ri-file-word-2-line", "ri-file-word-2-fill", "ri-file-ppt-2-line", "ri-file-ppt-2-fill", "ri-file-excel-2-line", "ri-file-excel-2-fill", "ri-file-hwp-line", "ri-file-hwp-fill", "ri-keynote-line", "ri-keynote-fill", "ri-numbers-line", "ri-numbers-fill", "ri-pages-line", "ri-pages-fill", "ri-file-search-line", "ri-file-search-fill", "ri-file-add-line", "ri-file-add-fill", "ri-file-reduce-line", "ri-file-reduce-fill", "ri-file-settings-line", "ri-file-settings-fill", "ri-file-upload-line", "ri-file-upload-fill", "ri-file-transfer-line", "ri-file-transfer-fill", "ri-file-download-line", "ri-file-download-fill", "ri-file-lock-line", "ri-file-lock-fill", "ri-file-chart-line", "ri-file-chart-fill", "ri-file-chart-2-line", "ri-file-chart-2-fill", "ri-file-image-line", "ri-file-image-fill", "ri-file-music-line", "ri-file-music-fill", "ri-file-video-line", "ri-file-video-fill", "ri-file-gif-line", "ri-file-gif-fill", "ri-file-forbid-line", "ri-file-forbid-fill", "ri-file-close-line", "ri-file-close-fill", "ri-file-info-line", "ri-file-info-fill", "ri-file-warning-line", "ri-file-warning-fill", "ri-file-unknow-line", "ri-file-unknow-fill", "ri-file-user-line", "ri-file-user-fill", "ri-file-shield-line", "ri-file-shield-fill", "ri-file-shield-2-line", "ri-file-shield-2-fill", "ri-file-damage-line", "ri-file-damage-fill", "ri-file-history-line", "ri-file-history-fill", "ri-file-shred-line", "ri-file-shred-fill", "ri-file-cloud-line", "ri-file-cloud-fill", "ri-folder-line", "ri-folder-fill", "ri-folder-2-line", "ri-folder-2-fill", "ri-folder-3-line", "ri-folder-3-fill", "ri-folder-4-line", "ri-folder-4-fill", "ri-folder-5-line", "ri-folder-5-fill", "ri-folders-line", "ri-folders-fill", "ri-folder-add-line", "ri-folder-add-fill", "ri-folder-reduce-line", "ri-folder-reduce-fill", "ri-folder-settings-line", "ri-folder-settings-fill", "ri-folder-upload-line", "ri-folder-upload-fill", "ri-folder-transfer-line", "ri-folder-transfer-fill", "ri-folder-download-line", "ri-folder-download-fill", "ri-folder-lock-line", "ri-folder-lock-fill", "ri-folder-chart-line", "ri-folder-chart-fill", "ri-folder-chart-2-line", "ri-folder-chart-2-fill", "ri-folder-music-line", "ri-folder-music-fill", "ri-folder-image-line", "ri-folder-image-fill", "ri-folder-video-line", "ri-folder-video-fill", "ri-folder-forbid-line", "ri-folder-forbid-fill", "ri-folder-info-line", "ri-folder-info-fill", "ri-folder-warning-line", "ri-folder-warning-fill", "ri-folder-unknow-line", "ri-folder-unknow-fill", "ri-folder-user-line", "ri-folder-user-fill", "ri-folder-shield-line", "ri-folder-shield-fill", "ri-folder-shield-2-line", "ri-folder-shield-2-fill", "ri-folder-shared-line", "ri-folder-shared-fill", "ri-folder-received-line", "ri-folder-received-fill", "ri-folder-open-line", "ri-folder-open-fill", "ri-folder-keyhole-line", "ri-folder-keyhole-fill", "ri-folder-zip-line", "ri-folder-zip-fill", "ri-folder-history-line", "ri-folder-history-fill", "ri-markdown-line", "ri-markdown-fill", "ri-bold", "ri-italic", "ri-heading", "ri-text", "ri-font-family", "ri-font-sans-serif", "ri-font-sans", "ri-font-mono", "ri-font-color", "ri-font-size", "ri-font-size-2", "ri-underline", "ri-overline", "ri-emphasis", "ri-emphasis-cn", "ri-strikethrough", "ri-strikethrough-2", "ri-format-clear", "ri-align-left", "ri-align-center", "ri-align-right", "ri-align-justify", "ri-align-top", "ri-align-vertically", "ri-align-bottom", "ri-list-check", "ri-list-check-2", "ri-list-check-3", "ri-list-ordered", "ri-list-ordered-2", "ri-list-unordered", "ri-list-radio", "ri-list-indefinite", "ri-indent-decrease", "ri-indent-increase", "ri-line-height", "ri-text-spacing", "ri-text-wrap", "ri-attachment-2", "ri-link", "ri-link-unlink", "ri-link-m", "ri-link-unlink-m", "ri-separator", "ri-space", "ri-page-separator", "ri-code-view", "ri-quote-text", "ri-double-quotes-l", "ri-double-quotes-r", "ri-single-quotes-l", "ri-single-quotes-r", "ri-table-2", "ri-subscript", "ri-subscript-2", "ri-superscript", "ri-superscript-2", "ri-paragraph", "ri-text-direction-l", "ri-text-direction-r", "ri-functions", "ri-omega", "ri-hashtag", "ri-asterisk", "ri-question-mark", "ri-info-i", "ri-translate", "ri-translate-2", "ri-a-b", "ri-english-input", "ri-pinyin-input", "ri-wubi-input", "ri-input-cursor-move", "ri-number-1", "ri-number-2", "ri-number-3", "ri-number-4", "ri-number-5", "ri-number-6", "ri-number-7", "ri-number-8", "ri-number-9", "ri-number-0", "ri-sort-asc", "ri-sort-desc", "ri-bring-forward", "ri-send-backward", "ri-bring-to-front", "ri-send-to-back", "ri-h-1", "ri-h-2", "ri-h-3", "ri-h-4", "ri-h-5", "ri-h-6", "ri-insert-column-left", "ri-insert-column-right", "ri-insert-row-top", "ri-insert-row-bottom", "ri-delete-column", "ri-delete-row", "ri-merge-cells-horizontal", "ri-merge-cells-vertical", "ri-split-cells-horizontal", "ri-split-cells-vertical", "ri-flow-chart", "ri-mind-map", "ri-node-tree", "ri-organization-chart", "ri-rounded-corner", "ri-sketching", "ri-draggable", "ri-slash-commands", "ri-slash-commands-2", "ri-ai-generate", "ri-dropdown-list", "ri-wallet-line", "ri-wallet-fill", "ri-wallet-2-line", "ri-wallet-2-fill", "ri-wallet-3-line", "ri-wallet-3-fill", "ri-bank-card-line", "ri-bank-card-fill", "ri-bank-card-2-line", "ri-bank-card-2-fill", "ri-secure-payment-line", "ri-secure-payment-fill", "ri-refund-line", "ri-refund-fill", "ri-refund-2-line", "ri-refund-2-fill", "ri-safe-line", "ri-safe-fill", "ri-safe-2-line", "ri-safe-2-fill", "ri-price-tag-line", "ri-price-tag-fill", "ri-price-tag-2-line", "ri-price-tag-2-fill", "ri-price-tag-3-line", "ri-price-tag-3-fill", "ri-ticket-line", "ri-ticket-fill", "ri-ticket-2-line", "ri-ticket-2-fill", "ri-coupon-line", "ri-coupon-fill", "ri-coupon-2-line", "ri-coupon-2-fill", "ri-coupon-3-line", "ri-coupon-3-fill", "ri-coupon-4-line", "ri-coupon-4-fill", "ri-coupon-5-line", "ri-coupon-5-fill", "ri-shopping-bag-line", "ri-shopping-bag-fill", "ri-shopping-bag-2-line", "ri-shopping-bag-2-fill", "ri-shopping-bag-3-line", "ri-shopping-bag-3-fill", "ri-shopping-basket-line", "ri-shopping-basket-fill", "ri-shopping-basket-2-line", "ri-shopping-basket-2-fill", "ri-shopping-cart-line", "ri-shopping-cart-fill", "ri-shopping-cart-2-line", "ri-shopping-cart-2-fill", "ri-vip-line", "ri-vip-fill", "ri-vip-crown-line", "ri-vip-crown-fill", "ri-vip-crown-2-line", "ri-vip-crown-2-fill", "ri-vip-diamond-line", "ri-vip-diamond-fill", "ri-trophy-line", "ri-trophy-fill", "ri-exchange-line", "ri-exchange-fill", "ri-exchange-box-line", "ri-exchange-box-fill", "ri-swap-line", "ri-swap-fill", "ri-swap-box-line", "ri-swap-box-fill", "ri-exchange-dollar-line", "ri-exchange-dollar-fill", "ri-exchange-cny-line", "ri-exchange-cny-fill", "ri-exchange-funds-line", "ri-exchange-funds-fill", "ri-increase-decrease-line", "ri-increase-decrease-fill", "ri-percent-line", "ri-percent-fill", "ri-copper-coin-line", "ri-copper-coin-fill", "ri-copper-diamond-line", "ri-copper-diamond-fill", "ri-money-cny-box-line", "ri-money-cny-box-fill", "ri-money-cny-circle-line", "ri-money-cny-circle-fill", "ri-money-dollar-box-line", "ri-money-dollar-box-fill", "ri-money-dollar-circle-line", "ri-money-dollar-circle-fill", "ri-money-euro-box-line", "ri-money-euro-box-fill", "ri-money-euro-circle-line", "ri-money-euro-circle-fill", "ri-money-pound-box-line", "ri-money-pound-box-fill", "ri-money-pound-circle-line", "ri-money-pound-circle-fill", "ri-money-rupee-circle-line", "ri-money-rupee-circle-fill", "ri-bit-coin-line", "ri-bit-coin-fill", "ri-coin-line", "ri-coin-fill", "ri-cash-line", "ri-cash-fill", "ri-coins-line", "ri-coins-fill", "ri-currency-line", "ri-currency-fill", "ri-funds-line", "ri-funds-fill", "ri-funds-box-line", "ri-funds-box-fill", "ri-red-packet-line", "ri-red-packet-fill", "ri-water-flash-line", "ri-water-flash-fill", "ri-stock-line", "ri-stock-fill", "ri-auction-line", "ri-auction-fill", "ri-gift-line", "ri-gift-fill", "ri-gift-2-line", "ri-gift-2-fill", "ri-hand-coin-line", "ri-hand-coin-fill", "ri-hand-heart-line", "ri-hand-heart-fill", "ri-24-hours-line", "ri-24-hours-fill", "ri-nft-line", "ri-nft-fill", "ri-p2p-line", "ri-p2p-fill", "ri-token-swap-line", "ri-token-swap-fill", "ri-btc-line", "ri-btc-fill", "ri-eth-line", "ri-eth-fill", "ri-xtz-line", "ri-xtz-fill", "ri-bnb-line", "ri-bnb-fill", "ri-xrp-line", "ri-xrp-fill", "ri-restaurant-line", "ri-restaurant-fill", "ri-restaurant-2-line", "ri-restaurant-2-fill", "ri-cup-line", "ri-cup-fill", "ri-goblet-line", "ri-goblet-fill", "ri-beer-line", "ri-beer-fill", "ri-cake-line", "ri-cake-fill", "ri-cake-2-line", "ri-cake-2-fill", "ri-cake-3-line", "ri-cake-3-fill", "ri-knife-line", "ri-knife-fill", "ri-knife-blood-line", "ri-knife-blood-fill", "ri-bread-line", "ri-bread-fill", "ri-drinks-line", "ri-drinks-fill", "ri-heart-line", "ri-heart-fill", "ri-heart-2-line", "ri-heart-2-fill", "ri-heart-3-line", "ri-heart-3-fill", "ri-heart-add-line", "ri-heart-add-fill", "ri-dislike-line", "ri-dislike-fill", "ri-hearts-line", "ri-hearts-fill", "ri-heart-pulse-line", "ri-heart-pulse-fill", "ri-pulse-line", "ri-pulse-fill", "ri-empathize-line", "ri-empathize-fill", "ri-nurse-line", "ri-nurse-fill", "ri-dossier-line", "ri-dossier-fill", "ri-health-book-line", "ri-health-book-fill", "ri-first-aid-kit-line", "ri-first-aid-kit-fill", "ri-capsule-line", "ri-capsule-fill", "ri-medicine-bottle-line", "ri-medicine-bottle-fill", "ri-flask-line", "ri-flask-fill", "ri-test-tube-line", "ri-test-tube-fill", "ri-microscope-line", "ri-microscope-fill", "ri-hand-sanitizer-line", "ri-hand-sanitizer-fill", "ri-mental-health-line", "ri-mental-health-fill", "ri-psychotherapy-line", "ri-psychotherapy-fill", "ri-stethoscope-line", "ri-stethoscope-fill", "ri-syringe-line", "ri-syringe-fill", "ri-thermometer-line", "ri-thermometer-fill", "ri-infrared-thermometer-line", "ri-infrared-thermometer-fill", "ri-surgical-mask-line", "ri-surgical-mask-fill", "ri-virus-line", "ri-virus-fill", "ri-lungs-line", "ri-lungs-fill", "ri-rest-time-line", "ri-rest-time-fill", "ri-zzz-line", "ri-zzz-fill", "ri-brain-line", "ri-brain-fill", "ri-alipay-line", "ri-alipay-fill", "ri-amazon-line", "ri-amazon-fill", "ri-android-line", "ri-android-fill", "ri-angularjs-line", "ri-angularjs-fill", "ri-app-store-line", "ri-app-store-fill", "ri-apple-line", "ri-apple-fill", "ri-baidu-line", "ri-baidu-fill", "ri-bard-line", "ri-bard-fill", "ri-behance-line", "ri-behance-fill", "ri-bilibili-line", "ri-bilibili-fill", "ri-blender-line", "ri-blender-fill", "ri-bootstrap-line", "ri-bootstrap-fill", "ri-centos-line", "ri-centos-fill", "ri-chrome-line", "ri-chrome-fill", "ri-codepen-line", "ri-codepen-fill", "ri-copilot-line", "ri-copilot-fill", "ri-coreos-line", "ri-coreos-fill", "ri-dingding-line", "ri-dingding-fill", "ri-discord-line", "ri-discord-fill", "ri-disqus-line", "ri-disqus-fill", "ri-douban-line", "ri-douban-fill", "ri-dribbble-line", "ri-dribbble-fill", "ri-drive-line", "ri-drive-fill", "ri-dropbox-line", "ri-dropbox-fill", "ri-edge-line", "ri-edge-fill", "ri-edge-new-line", "ri-edge-new-fill", "ri-evernote-line", "ri-evernote-fill", "ri-facebook-line", "ri-facebook-fill", "ri-facebook-circle-line", "ri-facebook-circle-fill", "ri-facebook-box-line", "ri-facebook-box-fill", "ri-finder-line", "ri-finder-fill", "ri-firefox-line", "ri-firefox-fill", "ri-flickr-line", "ri-flickr-fill", "ri-flutter-line", "ri-flutter-fill", "ri-gatsby-line", "ri-gatsby-fill", "ri-github-line", "ri-github-fill", "ri-gitlab-line", "ri-gitlab-fill", "ri-google-line", "ri-google-fill", "ri-google-play-line", "ri-google-play-fill", "ri-honor-of-kings-line", "ri-honor-of-kings-fill", "ri-ie-line", "ri-ie-fill", "ri-instagram-line", "ri-instagram-fill", "ri-invision-line", "ri-invision-fill", "ri-kakao-talk-line", "ri-kakao-talk-fill", "ri-line-line", "ri-line-fill", "ri-linkedin-line", "ri-linkedin-fill", "ri-linkedin-box-line", "ri-linkedin-box-fill", "ri-kick-line", "ri-kick-fill", "ri-microsoft-loop-line", "ri-microsoft-loop-fill", "ri-mastercard-line", "ri-mastercard-fill", "ri-mastodon-line", "ri-mastodon-fill", "ri-medium-line", "ri-medium-fill", "ri-messenger-line", "ri-messenger-fill", "ri-meta-line", "ri-meta-fill", "ri-microsoft-line", "ri-microsoft-fill", "ri-mini-program-line", "ri-mini-program-fill", "ri-netease-cloud-music-line", "ri-netease-cloud-music-fill", "ri-netflix-line", "ri-netflix-fill", "ri-notion-line", "ri-notion-fill", "ri-npmjs-line", "ri-npmjs-fill", "ri-openai-line", "ri-openai-fill", "ri-openbase-line", "ri-openbase-fill", "ri-open-source-line", "ri-open-source-fill", "ri-opera-line", "ri-opera-fill", "ri-patreon-line", "ri-patreon-fill", "ri-paypal-line", "ri-paypal-fill", "ri-pinterest-line", "ri-pinterest-fill", "ri-pixelfed-line", "ri-pixelfed-fill", "ri-playstation-line", "ri-playstation-fill", "ri-product-hunt-line", "ri-product-hunt-fill", "ri-qq-line", "ri-qq-fill", "ri-reactjs-line", "ri-reactjs-fill", "ri-reddit-line", "ri-reddit-fill", "ri-remixicon-line", "ri-remixicon-fill", "ri-safari-line", "ri-safari-fill", "ri-skype-line", "ri-skype-fill", "ri-slack-line", "ri-slack-fill", "ri-snapchat-line", "ri-snapchat-fill", "ri-soundcloud-line", "ri-soundcloud-fill", "ri-spectrum-line", "ri-spectrum-fill", "ri-spotify-line", "ri-spotify-fill", "ri-stack-overflow-line", "ri-stack-overflow-fill", "ri-stackshare-line", "ri-stackshare-fill", "ri-steam-line", "ri-steam-fill", "ri-supabase-line", "ri-supabase-fill", "ri-svelte-line", "ri-svelte-fill", "ri-switch-line", "ri-switch-fill", "ri-taobao-line", "ri-taobao-fill", "ri-telegram-line", "ri-telegram-fill", "ri-threads-line", "ri-threads-fill", "ri-tiktok-line", "ri-tiktok-fill", "ri-trello-line", "ri-trello-fill", "ri-tumblr-line", "ri-tumblr-fill", "ri-twitch-line", "ri-twitch-fill", "ri-twitter-line", "ri-twitter-fill", "ri-twitter-x-line", "ri-twitter-x-fill", "ri-ubuntu-line", "ri-ubuntu-fill", "ri-unsplash-line", "ri-unsplash-fill", "ri-vimeo-line", "ri-vimeo-fill", "ri-vk-line", "ri-vk-fill", "ri-visa-line", "ri-visa-fill", "ri-vuejs-line", "ri-vuejs-fill", "ri-wechat-line", "ri-wechat-fill", "ri-wechat-2-line", "ri-wechat-2-fill", "ri-wechat-channels-line", "ri-wechat-channels-fill", "ri-wechat-pay-line", "ri-wechat-pay-fill", "ri-weibo-line", "ri-weibo-fill", "ri-whatsapp-line", "ri-whatsapp-fill", "ri-windows-line", "ri-windows-fill", "ri-wordpress-line", "ri-wordpress-fill", "ri-xbox-line", "ri-xbox-fill", "ri-xing-line", "ri-xing-fill", "ri-youtube-line", "ri-youtube-fill", "ri-yuque-line", "ri-yuque-fill", "ri-zcool-line", "ri-zcool-fill", "ri-zhihu-line", "ri-zhihu-fill", "ri-map-pin-line", "ri-map-pin-fill", "ri-map-pin-2-line", "ri-map-pin-2-fill", "ri-map-pin-3-line", "ri-map-pin-3-fill", "ri-map-pin-4-line", "ri-map-pin-4-fill", "ri-map-pin-5-line", "ri-map-pin-5-fill", "ri-map-pin-add-line", "ri-map-pin-add-fill", "ri-map-pin-range-line", "ri-map-pin-range-fill", "ri-map-pin-time-line", "ri-map-pin-time-fill", "ri-map-pin-user-line", "ri-map-pin-user-fill", "ri-pin-distance-line", "ri-pin-distance-fill", "ri-pushpin-line", "ri-pushpin-fill", "ri-unpin-line", "ri-unpin-fill", "ri-pushpin-2-line", "ri-pushpin-2-fill", "ri-compass-line", "ri-compass-fill", "ri-compass-2-line", "ri-compass-2-fill", "ri-compass-3-line", "ri-compass-3-fill", "ri-compass-4-line", "ri-compass-4-fill", "ri-compass-discover-line", "ri-compass-discover-fill", "ri-anchor-line", "ri-anchor-fill", "ri-china-railway-line", "ri-china-railway-fill", "ri-space-ship-line", "ri-space-ship-fill", "ri-rocket-line", "ri-rocket-fill", "ri-rocket-2-line", "ri-rocket-2-fill", "ri-map-line", "ri-map-fill", "ri-map-2-line", "ri-map-2-fill", "ri-treasure-map-line", "ri-treasure-map-fill", "ri-road-map-line", "ri-road-map-fill", "ri-earth-line", "ri-earth-fill", "ri-globe-line", "ri-globe-fill", "ri-planet-line", "ri-planet-fill", "ri-parking-line", "ri-parking-fill", "ri-parking-box-line", "ri-parking-box-fill", "ri-route-line", "ri-route-fill", "ri-guide-line", "ri-guide-fill", "ri-gas-station-line", "ri-gas-station-fill", "ri-charging-pile-line", "ri-charging-pile-fill", "ri-charging-pile-2-line", "ri-charging-pile-2-fill", "ri-car-line", "ri-car-fill", "ri-car-washing-line", "ri-car-washing-fill", "ri-roadster-line", "ri-roadster-fill", "ri-taxi-line", "ri-taxi-fill", "ri-taxi-wifi-line", "ri-taxi-wifi-fill", "ri-police-car-line", "ri-police-car-fill", "ri-bus-line", "ri-bus-fill", "ri-bus-2-line", "ri-bus-2-fill", "ri-bus-wifi-line", "ri-bus-wifi-fill", "ri-truck-line", "ri-truck-fill", "ri-train-line", "ri-train-fill", "ri-train-wifi-line", "ri-train-wifi-fill", "ri-subway-line", "ri-subway-fill", "ri-subway-wifi-line", "ri-subway-wifi-fill", "ri-flight-takeoff-line", "ri-flight-takeoff-fill", "ri-flight-land-line", "ri-flight-land-fill", "ri-plane-line", "ri-plane-fill", "ri-sailboat-line", "ri-sailboat-fill", "ri-ship-line", "ri-ship-fill", "ri-ship-2-line", "ri-ship-2-fill", "ri-bike-line", "ri-bike-fill", "ri-e-bike-line", "ri-e-bike-fill", "ri-e-bike-2-line", "ri-e-bike-2-fill", "ri-takeaway-line", "ri-takeaway-fill", "ri-motorbike-line", "ri-motorbike-fill", "ri-caravan-line", "ri-caravan-fill", "ri-walk-line", "ri-walk-fill", "ri-run-line", "ri-run-fill", "ri-riding-line", "ri-riding-fill", "ri-barricade-line", "ri-barricade-fill", "ri-footprint-line", "ri-footprint-fill", "ri-traffic-light-line", "ri-traffic-light-fill", "ri-signal-tower-line", "ri-signal-tower-fill", "ri-hotel-bed-line", "ri-hotel-bed-fill", "ri-navigation-line", "ri-navigation-fill", "ri-oil-line", "ri-oil-fill", "ri-direction-line", "ri-direction-fill", "ri-steering-line", "ri-steering-fill", "ri-steering-2-line", "ri-steering-2-fill", "ri-lifebuoy-line", "ri-lifebuoy-fill", "ri-passport-line", "ri-passport-fill", "ri-suitcase-line", "ri-suitcase-fill", "ri-suitcase-2-line", "ri-suitcase-2-fill", "ri-suitcase-3-line", "ri-suitcase-3-fill", "ri-luggage-deposit-line", "ri-luggage-deposit-fill", "ri-luggage-cart-line", "ri-luggage-cart-fill", "ri-image-line", "ri-image-fill", "ri-image-circle-line", "ri-image-circle-fill", "ri-image-2-line", "ri-image-2-fill", "ri-image-add-line", "ri-image-add-fill", "ri-image-edit-line", "ri-image-edit-fill", "ri-landscape-line", "ri-landscape-fill", "ri-gallery-line", "ri-gallery-fill", "ri-gallery-upload-line", "ri-gallery-upload-fill", "ri-video-line", "ri-video-fill", "ri-movie-line", "ri-movie-fill", "ri-movie-2-line", "ri-movie-2-fill", "ri-film-line", "ri-film-fill", "ri-clapperboard-line", "ri-clapperboard-fill", "ri-vidicon-line", "ri-vidicon-fill", "ri-vidicon-2-line", "ri-vidicon-2-fill", "ri-live-line", "ri-live-fill", "ri-video-add-line", "ri-video-add-fill", "ri-video-upload-line", "ri-video-upload-fill", "ri-video-download-line", "ri-video-download-fill", "ri-dv-line", "ri-dv-fill", "ri-camera-line", "ri-camera-fill", "ri-camera-off-line", "ri-camera-off-fill", "ri-camera-2-line", "ri-camera-2-fill", "ri-camera-3-line", "ri-camera-3-fill", "ri-camera-lens-line", "ri-camera-lens-fill", "ri-camera-switch-line", "ri-camera-switch-fill", "ri-polaroid-line", "ri-polaroid-fill", "ri-polaroid-2-line", "ri-polaroid-2-fill", "ri-phone-camera-line", "ri-phone-camera-fill", "ri-webcam-line", "ri-webcam-fill", "ri-mv-line", "ri-mv-fill", "ri-music-line", "ri-music-fill", "ri-music-2-line", "ri-music-2-fill", "ri-disc-line", "ri-disc-fill", "ri-album-line", "ri-album-fill", "ri-dvd-line", "ri-dvd-fill", "ri-headphone-line", "ri-headphone-fill", "ri-radio-line", "ri-radio-fill", "ri-radio-2-line", "ri-radio-2-fill", "ri-tape-line", "ri-tape-fill", "ri-mic-line", "ri-mic-fill", "ri-mic-2-line", "ri-mic-2-fill", "ri-mic-off-line", "ri-mic-off-fill", "ri-volume-down-line", "ri-volume-down-fill", "ri-volume-mute-line", "ri-volume-mute-fill", "ri-volume-up-line", "ri-volume-up-fill", "ri-volume-vibrate-line", "ri-volume-vibrate-fill", "ri-volume-off-vibrate-line", "ri-volume-off-vibrate-fill", "ri-speaker-line", "ri-speaker-fill", "ri-speaker-2-line", "ri-speaker-2-fill", "ri-speaker-3-line", "ri-speaker-3-fill", "ri-surround-sound-line", "ri-surround-sound-fill", "ri-broadcast-line", "ri-broadcast-fill", "ri-notification-line", "ri-notification-fill", "ri-notification-2-line", "ri-notification-2-fill", "ri-notification-3-line", "ri-notification-3-fill", "ri-notification-4-line", "ri-notification-4-fill", "ri-notification-off-line", "ri-notification-off-fill", "ri-play-circle-line", "ri-play-circle-fill", "ri-pause-circle-line", "ri-pause-circle-fill", "ri-record-circle-line", "ri-record-circle-fill", "ri-stop-circle-line", "ri-stop-circle-fill", "ri-eject-line", "ri-eject-fill", "ri-play-line", "ri-play-fill", "ri-pause-line", "ri-pause-fill", "ri-stop-line", "ri-stop-fill", "ri-rewind-line", "ri-rewind-fill", "ri-speed-line", "ri-speed-fill", "ri-skip-back-line", "ri-skip-back-fill", "ri-skip-forward-line", "ri-skip-forward-fill", "ri-play-mini-line", "ri-play-mini-fill", "ri-pause-mini-line", "ri-pause-mini-fill", "ri-stop-mini-line", "ri-stop-mini-fill", "ri-rewind-mini-line", "ri-rewind-mini-fill", "ri-speed-mini-line", "ri-speed-mini-fill", "ri-skip-back-mini-line", "ri-skip-back-mini-fill", "ri-skip-forward-mini-line", "ri-skip-forward-mini-fill", "ri-replay-5-line", "ri-replay-5-fill", "ri-forward-5-line", "ri-forward-5-fill", "ri-replay-10-line", "ri-replay-10-fill", "ri-forward-10-line", "ri-forward-10-fill", "ri-replay-15-line", "ri-replay-15-fill", "ri-forward-15-line", "ri-forward-15-fill", "ri-replay-30-line", "ri-replay-30-fill", "ri-forward-30-line", "ri-forward-30-fill", "ri-memories-line", "ri-memories-fill", "ri-repeat-line", "ri-repeat-fill", "ri-repeat-2-line", "ri-repeat-2-fill", "ri-repeat-one-line", "ri-repeat-one-fill", "ri-order-play-line", "ri-order-play-fill", "ri-shuffle-line", "ri-shuffle-fill", "ri-play-list-line", "ri-play-list-fill", "ri-play-list-2-line", "ri-play-list-2-fill", "ri-play-list-add-line", "ri-play-list-add-fill", "ri-fullscreen-line", "ri-fullscreen-fill", "ri-fullscreen-exit-line", "ri-fullscreen-exit-fill", "ri-equalizer-line", "ri-equalizer-fill", "ri-equalizer-2-line", "ri-equalizer-2-fill", "ri-equalizer-3-line", "ri-equalizer-3-fill", "ri-sound-module-line", "ri-sound-module-fill", "ri-rhythm-line", "ri-rhythm-fill", "ri-voiceprint-line", "ri-voiceprint-fill", "ri-speed-up-line", "ri-speed-up-fill", "ri-slow-down-line", "ri-slow-down-fill", "ri-hq-line", "ri-hq-fill", "ri-hd-line", "ri-hd-fill", "ri-4k-line", "ri-4k-fill", "ri-closed-captioning-line", "ri-closed-captioning-fill", "ri-aspect-ratio-line", "ri-aspect-ratio-fill", "ri-picture-in-picture-line", "ri-picture-in-picture-fill", "ri-picture-in-picture-2-line", "ri-picture-in-picture-2-fill", "ri-picture-in-picture-exit-line", "ri-picture-in-picture-exit-fill", "ri-apps-line", "ri-apps-fill", "ri-apps-2-line", "ri-apps-2-fill", "ri-function-line", "ri-function-fill", "ri-dashboard-line", "ri-dashboard-fill", "ri-menu-line", "ri-menu-fill", "ri-menu-2-line", "ri-menu-2-fill", "ri-menu-3-line", "ri-menu-3-fill", "ri-menu-4-line", "ri-menu-4-fill", "ri-menu-5-line", "ri-menu-5-fill", "ri-menu-add-line", "ri-menu-add-fill", "ri-menu-fold-line", "ri-menu-fold-fill", "ri-menu-unfold-line", "ri-menu-unfold-fill", "ri-menu-search-line", "ri-menu-search-fill", "ri-more-line", "ri-more-fill", "ri-more-2-line", "ri-more-2-fill", "ri-star-line", "ri-star-fill", "ri-star-s-line", "ri-star-s-fill", "ri-star-half-line", "ri-star-half-fill", "ri-star-half-s-line", "ri-star-half-s-fill", "ri-settings-line", "ri-settings-fill", "ri-settings-2-line", "ri-settings-2-fill", "ri-settings-3-line", "ri-settings-3-fill", "ri-settings-4-line", "ri-settings-4-fill", "ri-settings-5-line", "ri-settings-5-fill", "ri-settings-6-line", "ri-settings-6-fill", "ri-list-settings-line", "ri-list-settings-fill", "ri-forbid-line", "ri-forbid-fill", "ri-forbid-2-line", "ri-forbid-2-fill", "ri-prohibited-line", "ri-prohibited-fill", "ri-information-line", "ri-information-fill", "ri-error-warning-line", "ri-error-warning-fill", "ri-question-line", "ri-question-fill", "ri-alert-line", "ri-alert-fill", "ri-spam-line", "ri-spam-fill", "ri-spam-2-line", "ri-spam-2-fill", "ri-spam-3-line", "ri-spam-3-fill", "ri-checkbox-blank-line", "ri-checkbox-blank-fill", "ri-checkbox-line", "ri-checkbox-fill", "ri-checkbox-indeterminate-line", "ri-checkbox-indeterminate-fill", "ri-add-box-line", "ri-add-box-fill", "ri-checkbox-blank-circle-line", "ri-checkbox-blank-circle-fill", "ri-checkbox-circle-line", "ri-checkbox-circle-fill", "ri-indeterminate-circle-line", "ri-indeterminate-circle-fill", "ri-add-circle-line", "ri-add-circle-fill", "ri-close-circle-line", "ri-close-circle-fill", "ri-radio-button-line", "ri-radio-button-fill", "ri-checkbox-multiple-blank-line", "ri-checkbox-multiple-blank-fill", "ri-checkbox-multiple-line", "ri-checkbox-multiple-fill", "ri-check-line", "ri-check-fill", "ri-check-double-line", "ri-check-double-fill", "ri-close-line", "ri-close-fill", "ri-add-line", "ri-add-fill", "ri-subtract-line", "ri-subtract-fill", "ri-divide-line", "ri-divide-fill", "ri-equal-line", "ri-equal-fill", "ri-download-line", "ri-download-fill", "ri-upload-line", "ri-upload-fill", "ri-download-2-line", "ri-download-2-fill", "ri-upload-2-line", "ri-upload-2-fill", "ri-download-cloud-line", "ri-download-cloud-fill", "ri-download-cloud-2-line", "ri-download-cloud-2-fill", "ri-upload-cloud-line", "ri-upload-cloud-fill", "ri-upload-cloud-2-line", "ri-upload-cloud-2-fill", "ri-login-box-line", "ri-login-box-fill", "ri-logout-box-line", "ri-logout-box-fill", "ri-logout-box-r-line", "ri-logout-box-r-fill", "ri-login-circle-line", "ri-login-circle-fill", "ri-logout-circle-line", "ri-logout-circle-fill", "ri-logout-circle-r-line", "ri-logout-circle-r-fill", "ri-refresh-line", "ri-refresh-fill", "ri-shield-line", "ri-shield-fill", "ri-shield-cross-line", "ri-shield-cross-fill", "ri-shield-flash-line", "ri-shield-flash-fill", "ri-shield-star-line", "ri-shield-star-fill", "ri-shield-user-line", "ri-shield-user-fill", "ri-shield-keyhole-line", "ri-shield-keyhole-fill", "ri-shield-check-line", "ri-shield-check-fill", "ri-delete-back-line", "ri-delete-back-fill", "ri-delete-back-2-line", "ri-delete-back-2-fill", "ri-delete-bin-line", "ri-delete-bin-fill", "ri-delete-bin-2-line", "ri-delete-bin-2-fill", "ri-delete-bin-3-line", "ri-delete-bin-3-fill", "ri-delete-bin-4-line", "ri-delete-bin-4-fill", "ri-delete-bin-5-line", "ri-delete-bin-5-fill", "ri-delete-bin-6-line", "ri-delete-bin-6-fill", "ri-delete-bin-7-line", "ri-delete-bin-7-fill", "ri-lock-line", "ri-lock-fill", "ri-lock-2-line", "ri-lock-2-fill", "ri-lock-password-line", "ri-lock-password-fill", "ri-lock-unlock-line", "ri-lock-unlock-fill", "ri-eye-line", "ri-eye-fill", "ri-eye-off-line", "ri-eye-off-fill", "ri-eye-2-line", "ri-eye-2-fill", "ri-eye-close-line", "ri-eye-close-fill", "ri-search-line", "ri-search-fill", "ri-search-2-line", "ri-search-2-fill", "ri-search-eye-line", "ri-search-eye-fill", "ri-zoom-in-line", "ri-zoom-in-fill", "ri-zoom-out-line", "ri-zoom-out-fill", "ri-find-replace-line", "ri-find-replace-fill", "ri-share-line", "ri-share-fill", "ri-share-2-line", "ri-share-2-fill", "ri-share-box-line", "ri-share-box-fill", "ri-share-circle-line", "ri-share-circle-fill", "ri-share-forward-line", "ri-share-forward-fill", "ri-share-forward-2-line", "ri-share-forward-2-fill", "ri-share-forward-box-line", "ri-share-forward-box-fill", "ri-side-bar-line", "ri-side-bar-fill", "ri-time-line", "ri-time-fill", "ri-timer-line", "ri-timer-fill", "ri-timer-2-line", "ri-timer-2-fill", "ri-timer-flash-line", "ri-timer-flash-fill", "ri-alarm-line", "ri-alarm-fill", "ri-history-line", "ri-history-fill", "ri-hourglass-2-line", "ri-hourglass-2-fill", "ri-hourglass-line", "ri-hourglass-fill", "ri-thumb-up-line", "ri-thumb-up-fill", "ri-thumb-down-line", "ri-thumb-down-fill", "ri-alarm-warning-line", "ri-alarm-warning-fill", "ri-notification-badge-line", "ri-notification-badge-fill", "ri-toggle-line", "ri-toggle-fill", "ri-filter-line", "ri-filter-fill", "ri-filter-2-line", "ri-filter-2-fill", "ri-filter-3-line", "ri-filter-3-fill", "ri-filter-off-line", "ri-filter-off-fill", "ri-loader-line", "ri-loader-fill", "ri-loader-2-line", "ri-loader-2-fill", "ri-loader-3-line", "ri-loader-3-fill", "ri-loader-4-line", "ri-loader-4-fill", "ri-loader-5-line", "ri-loader-5-fill", "ri-external-link-line", "ri-external-link-fill", "ri-loop-left-line", "ri-loop-left-fill", "ri-loop-right-line", "ri-loop-right-fill", "ri-user-line", "ri-user-fill", "ri-user-2-line", "ri-user-2-fill", "ri-user-3-line", "ri-user-3-fill", "ri-user-4-line", "ri-user-4-fill", "ri-user-5-line", "ri-user-5-fill", "ri-user-6-line", "ri-user-6-fill", "ri-user-smile-line", "ri-user-smile-fill", "ri-account-box-line", "ri-account-box-fill", "ri-account-circle-line", "ri-account-circle-fill", "ri-account-pin-box-line", "ri-account-pin-box-fill", "ri-account-pin-circle-line", "ri-account-pin-circle-fill", "ri-user-add-line", "ri-user-add-fill", "ri-user-follow-line", "ri-user-follow-fill", "ri-user-unfollow-line", "ri-user-unfollow-fill", "ri-user-shared-line", "ri-user-shared-fill", "ri-user-shared-2-line", "ri-user-shared-2-fill", "ri-user-received-line", "ri-user-received-fill", "ri-user-received-2-line", "ri-user-received-2-fill", "ri-user-location-line", "ri-user-location-fill", "ri-user-search-line", "ri-user-search-fill", "ri-user-settings-line", "ri-user-settings-fill", "ri-user-star-line", "ri-user-star-fill", "ri-user-heart-line", "ri-user-heart-fill", "ri-admin-line", "ri-admin-fill", "ri-user-forbid-line", "ri-user-forbid-fill", "ri-contacts-line", "ri-contacts-fill", "ri-group-line", "ri-group-fill", "ri-group-2-line", "ri-group-2-fill", "ri-team-line", "ri-team-fill", "ri-user-voice-line", "ri-user-voice-fill", "ri-emotion-line", "ri-emotion-fill", "ri-emotion-2-line", "ri-emotion-2-fill", "ri-emotion-happy-line", "ri-emotion-happy-fill", "ri-emotion-normal-line", "ri-emotion-normal-fill", "ri-emotion-unhappy-line", "ri-emotion-unhappy-fill", "ri-emotion-laugh-line", "ri-emotion-laugh-fill", "ri-emotion-sad-line", "ri-emotion-sad-fill", "ri-skull-line", "ri-skull-fill", "ri-skull-2-line", "ri-skull-2-fill", "ri-men-line", "ri-men-fill", "ri-women-line", "ri-women-fill", "ri-travesti-line", "ri-travesti-fill", "ri-genderless-line", "ri-genderless-fill", "ri-open-arm-line", "ri-open-arm-fill", "ri-body-scan-line", "ri-body-scan-fill", "ri-parent-line", "ri-parent-fill", "ri-robot-line", "ri-robot-fill", "ri-robot-2-line", "ri-robot-2-fill", "ri-robot-3-line", "ri-robot-3-fill", "ri-aliens-line", "ri-aliens-fill", "ri-bear-smile-line", "ri-bear-smile-fill", "ri-mickey-line", "ri-mickey-fill", "ri-criminal-line", "ri-criminal-fill", "ri-ghost-line", "ri-ghost-fill", "ri-ghost-2-line", "ri-ghost-2-fill", "ri-ghost-smile-line", "ri-ghost-smile-fill", "ri-star-smile-line", "ri-star-smile-fill", "ri-spy-line", "ri-spy-fill", "ri-sun-line", "ri-sun-fill", "ri-moon-line", "ri-moon-fill", "ri-flashlight-line", "ri-flashlight-fill", "ri-cloudy-line", "ri-cloudy-fill", "ri-cloudy-2-line", "ri-cloudy-2-fill", "ri-mist-line", "ri-mist-fill", "ri-foggy-line", "ri-foggy-fill", "ri-cloud-windy-line", "ri-cloud-windy-fill", "ri-windy-line", "ri-windy-fill", "ri-rainy-line", "ri-rainy-fill", "ri-drizzle-line", "ri-drizzle-fill", "ri-showers-line", "ri-showers-fill", "ri-heavy-showers-line", "ri-heavy-showers-fill", "ri-thunderstorms-line", "ri-thunderstorms-fill", "ri-hail-line", "ri-hail-fill", "ri-snowy-line", "ri-snowy-fill", "ri-sun-cloudy-line", "ri-sun-cloudy-fill", "ri-moon-cloudy-line", "ri-moon-cloudy-fill", "ri-tornado-line", "ri-tornado-fill", "ri-typhoon-line", "ri-typhoon-fill", "ri-haze-line", "ri-haze-fill", "ri-haze-2-line", "ri-haze-2-fill", "ri-sun-foggy-line", "ri-sun-foggy-fill", "ri-moon-foggy-line", "ri-moon-foggy-fill", "ri-moon-clear-line", "ri-moon-clear-fill", "ri-temp-hot-line", "ri-temp-hot-fill", "ri-temp-cold-line", "ri-temp-cold-fill", "ri-celsius-line", "ri-celsius-fill", "ri-fahrenheit-line", "ri-fahrenheit-fill", "ri-water-percent-line", "ri-water-percent-fill", "ri-fire-line", "ri-fire-fill", "ri-blaze-line", "ri-blaze-fill", "ri-earthquake-line", "ri-earthquake-fill", "ri-flood-line", "ri-flood-fill", "ri-meteor-line", "ri-meteor-fill", "ri-rainbow-line", "ri-rainbow-fill", "ri-shining-line", "ri-shining-fill", "ri-shining-2-line", "ri-shining-2-fill", "ri-sparkling-line", "ri-sparkling-fill", "ri-sparkling-2-line", "ri-sparkling-2-fill", "ri-basketball-line", "ri-basketball-fill", "ri-bell-line", "ri-bell-fill", "ri-billiards-line", "ri-billiards-fill", "ri-boxing-line", "ri-boxing-fill", "ri-door-lock-line", "ri-door-lock-fill", "ri-door-lock-box-line", "ri-door-lock-box-fill", "ri-football-line", "ri-football-fill", "ri-game-line", "ri-game-fill", "ri-handbag-line", "ri-handbag-fill", "ri-key-line", "ri-key-fill", "ri-key-2-line", "ri-key-2-fill", "ri-lightbulb-line", "ri-lightbulb-fill", "ri-lightbulb-flash-line", "ri-lightbulb-flash-fill", "ri-outlet-line", "ri-outlet-fill", "ri-outlet-2-line", "ri-outlet-2-fill", "ri-plug-line", "ri-plug-fill", "ri-plug-2-line", "ri-plug-2-fill", "ri-ping-pong-line", "ri-ping-pong-fill", "ri-reserved-line", "ri-reserved-fill", "ri-shirt-line", "ri-shirt-fill", "ri-sword-line", "ri-sword-fill", "ri-t-shirt-line", "ri-t-shirt-fill", "ri-t-shirt-2-line", "ri-t-shirt-2-fill", "ri-t-shirt-air-line", "ri-t-shirt-air-fill", "ri-umbrella-line", "ri-umbrella-fill", "ri-character-recognition-line", "ri-character-recognition-fill", "ri-voice-recognition-line", "ri-voice-recognition-fill", "ri-leaf-line", "ri-leaf-fill", "ri-plant-line", "ri-plant-fill", "ri-seedling-line", "ri-seedling-fill", "ri-tree-line", "ri-tree-fill", "ri-recycle-line", "ri-recycle-fill", "ri-scales-2-line", "ri-scales-2-fill", "ri-scales-line", "ri-scales-fill", "ri-scales-3-line", "ri-scales-3-fill", "ri-fridge-line", "ri-fridge-fill", "ri-wheelchair-line", "ri-wheelchair-fill", "ri-cactus-line", "ri-cactus-fill", "ri-door-line", "ri-door-fill", "ri-door-open-line", "ri-door-open-fill", "ri-door-closed-line", "ri-door-closed-fill", "ri-graduation-cap-line", "ri-graduation-cap-fill", "ri-box-1-line", "ri-box-1-fill", "ri-box-2-line", "ri-box-2-fill", "ri-box-3-line", "ri-box-3-fill", "ri-candle-line", "ri-candle-fill", "ri-cross-line", "ri-cross-fill", "ri-infinity-line", "ri-infinity-fill", "ri-goggles-line", "ri-goggles-fill", "ri-glasses-line", "ri-glasses-fill", "ri-glasses-2-line", "ri-glasses-2-fill", "ri-dice-1-line", "ri-dice-1-fill", "ri-dice-2-line", "ri-dice-2-fill", "ri-dice-4-line", "ri-dice-4-fill", "ri-dice-6-line", "ri-dice-6-fill", "ri-dice-5-line", "ri-dice-5-fill", "ri-dice-3-line", "ri-dice-3-fill", "ri-dice-line", "ri-dice-fill", "ri-flower-line", "ri-flower-fill", "ri-armchair-line", "ri-armchair-fill", "ri-sofa-line", "ri-sofa-fill", "ri-arrow-up-s-line" ], q:'', modalShow: false, } }, emits: ['update:modelValue'], props: { modelValue: { default: null, }, xname:{ default: '', type: String, }, xvalue:{ default: '', type: String, }, onSelect: { default: function () { }, type: Function, }, }, mounted() { if (this.modelValue != null) { this.currentIcon = this.modelValue; }else{ this.currentIcon = this.xvalue; } }, computed: { modalStyle:function (){ if (this.modalShow){ return 'display: block !important;'; }else{ return 'display:none;'; } } }, methods: { selecting(i){ this.currentIcon = i; this.modalShow = false; if (this.modelValue != null) { this.$emit('update:modelValue', i); } this.onSelect(i); }, showModal:function () { this.modalShow = true; }, hideModal:function () { this.modalShow = false; } }, } </script> <style scoped> #remix-icon-picker { } #icon-dropdown{ //display: block; min-height: 45px; padding-right: 2rem; padding-left: 2rem; } #icon-dropdown i{ font-size: 20px; } #ri-modal{ position: fixed; display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px); } #ri-selector{ height: 90vh; border-radius: 7px; width: 80%; margin: 5vh auto; background: #00000099; padding: 5px; } .ri-search-box{ padding: 7px 1rem; } .icon-list{ height: calc(80vh - 50px); overflow-y: auto; padding: 2px 7px ; text-align: center; user-select: none; } .icon-list i{ display: inline-flex; font-size: 25px; padding: 7px; transition: 200ms; } .icon-list i:hover{ background: #ffffff75; transform: scale(1.75); color: darkred; cursor: pointer; } #selected-icon{ font-size: 30px; color: darkred; width: 50px; padding: 5px; background: #000; margin: auto; display: flex; align-items: center; justify-content: center; height: 35px; } </style>