dev.box-icon-element.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test Custom Element</title>
    <style>
        #prototype {
            margin-bottom: 5em;
        }
        #controls {
            padding: 1em 0.5em;
            margin-bottom: 0.5em;
            border-bottom: 1px solid lightgrey;
        }
        .icon {
            display: inline-block;
            margin: 1em;
            padding: 1em;
            width: 150px;
            text-align: center;
        }
        .icon:hover {
            transition: box-shadow 0.5s;
            box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
        }
        .icon > div {
            white-space: nowrap;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            margin-bottom: 0.5em;
        }
    </style>
</head>
<body>
<h1>Development Page - <code>box-icon</code> Custom Element</h1>
<div id="prototype">
    <div id="controls">
        <span>Color</span> <input name="color" type="color">
        <span>Size</span> <input name="size" type="text" placeholder="xs, sm, md, lg or size">
        <span>rotate</span>
        <select name="rotate">
            <option value="" selected>(none)</option>
            <option value="90">90 deg</option>
            <option value="180">180 deg</option>
            <option value="270">270 deg</option>
        </select>
        <span>Flip</span>
        <select name="flip">
            <option value="" selected>(none)</option>
            <option value="horizontal">horizontal</option>
            <option value="vertical">vertical</option>
        </select>
        <span>border</span>
        <select name="border">
            <option value="" selected>(none)</option>
            <option value="square">square</option>
            <option value="circle">circle</option>
        </select>
        <span>Animation</span>
        <select name="animation">
            <option value="" selected>(none)</option>
            <option value="spin">spin</option>
            <option value="tada">tada</option>
            <option value="flashing">flashing</option>
            <option value="burst">burst</option>
            <option value="fade-left">fade-left</option>
            <option value="fade-right">fade-right</option>
            <option value="spin-hover">spin-hover</option>
            <option value="tada-hover">tada-hover</option>
            <option value="flashing-hover">flashing-hover</option>
            <option value="burst-hover">burst-hover</option>
            <option value="fade-left-hover">fade-left-hover</option>
            <option value="fade-right-hover">fade-right-hover</option>
        </select>
    </div>
</div>

<script src="/dist/proxicons.js"></script>
<script type="module">
    const icons_r = [
  "dice-6",
  "dice-5",
  "dice-4",
  "dice-3",
  "dice-2",
  "dice-1",
  "border-inner",
  "border-none",
  "glasses-alt",
  "glasses",
  "calendar-week",
  "scan",
  "bowling-ball",
  "book-reader",
  "arrow-to-bottom",
  "arrow-to-top",
  "arrow-to-left",
  "arrow-to-right",
  "arrow-from-right",
  "arrow-from-left",
  "arrow-from-bottom",
  "arrow-from-top",
  "current-location",
  "been-here",
  "webcam",
  "low-vision",
  "mask",
  "wifi-0",
  "wifi-1",
  "wifi-2",
  "traffic-cone",
  "spray-can",
  "recycle",
  "layer-minus",
  "layer-plus",
  "info-square",
  "home-heart",
  "heart-square",
  "heart-circle",
  "microchip",
  "pointer",
  "coffee-togo",
  "calendar-edit",
  "cabinet",
  "bus-school",
  "bomb",
  "bible",
  "beer",
  "baseball",
  "atom",
  "arch",
  "location-plus",
  "align-left",
  "align-middle",
  "align-right",
  "arrow-back",
  "bell-minus",
  "bell-off",
  "bell-plus",
  "bell",
  "bookmark",
  "bookmarks",
  "bullseye",
  "camera-off",
  "camera",
  "captions",
  "checkbox-checked",
  "checkbox",
  "checkbox-square",
  "chevron-down",
  "chevron-up",
  "chevron-left",
  "chevron-right",
  "chevrons-down",
  "chevrons-up",
  "chevrons-right",
  "chevrons-left",
  "clipboard",
  "code-curly",
  "code",
  "coffee",
  "copy",
  "copyright",
  "down-arrow-circle",
  "error-circle",
  "error",
  "exit-fullscreen",
  "fast-forward-circle",
  "fast-forward",
  "first-page",
  "folder-minus",
  "folder-plus",
  "folder",
  "fullscreen",
  "hide",
  "image",
  "info-circle",
  "align-justify",
  "key",
  "last-page",
  "left-arrow-circle",
  "left-down-arrow-circle",
  "left-indent",
  "left-top-arrow-circle",
  "menu",
  "microphone",
  "minus-circle",
  "moon",
  "pause-circle",
  "pause",
  "play-circle",
  "play",
  "plus-circle",
  "question-mark",
  "radio-circle-marked",
  "radio-circle",
  "rectangle",
  "rewind",
  "reset",
  "right-arrow-circle",
  "right-down-arrow-circle",
  "right-indent",
  "right-top-arrow-circle",
  "rss",
  "search",
  "show",
  "skip-next",
  "skip-previous",
  "stop-circle",
  "stop",
  "stopwatch",
  "sync",
  "time",
  "toggle-left",
  "toggle-right",
  "trending-down",
  "trending-up",
  "up-arrow-circle",
  "vertical-center",
  "video",
  "volume-full",
  "volume-low",
  "volume-mute",
  "volume",
  "x-circle",
  "zoom-in",
  "zoom-out",
  "archive",
  "at",
  "bar-chart-alt",
  "bar-chart-square",
  "bar-chart",
  "basketball",
  "block",
  "book-bookmark",
  "book",
  "bookmark-minus",
  "bookmark-plus",
  "briefcase",
  "broadcast",
  "building",
  "bug",
  "bluetooth",
  "bulb",
  "buoy",
  "calendar-plus",
  "calendar-check",
  "calendar-minus",
  "calendar-x",
  "calendar",
  "chart",
  "cloud-download",
  "cloud-upload",
  "cloud",
  "terminal",
  "crosshair",
  "compass",
  "data",
  "desktop",
  "directions",
  "dollar",
  "dots-horizontal-rounded",
  "dots-horizontal",
  "dots-vertical-rounded",
  "dots-vertical",
  "download",
  "envelope",
  "gift",
  "globe",
  "devices",
  "headphone",
  "heart",
  "home",
  "laptop",
  "layer",
  "link-alt",
  "link",
  "list-plus",
  "list-ul",
  "list-minus",
  "lock-open",
  "lock",
  "map-alt",
  "map",
  "message-rounded",
  "message",
  "mobile-alt",
  "mobile",
  "navigation",
  "phone",
  "pie-chart",
  "send",
  "sidebar",
  "sitemap",
  "spreadsheet",
  "tab",
  "tag",
  "target-lock",
  "tennis-ball",
  "alarm",
  "upload",
  "usb",
  "video-off",
  "voicemail",
  "wifi",
  "window-open",
  "window",
  "windows",
  "duplicate",
  "table",
  "x",
  "adjust",
  "album",
  "anchor",
  "award",
  "bold",
  "calculator",
  "cart",
  "check",
  "cloud-drizzle",
  "cloud-light-rain",
  "cloud-lightning",
  "cloud-rain",
  "cloud-snow",
  "cog",
  "columns",
  "credit-card",
  "crop",
  "cube",
  "cut",
  "detail",
  "diamond",
  "edit",
  "file",
  "filter",
  "font",
  "git-branch",
  "git-commit",
  "git-compare",
  "git-merge",
  "git-pull-request",
  "git-repo-forked",
  "group",
  "hash",
  "heading",
  "home-alt",
  "italic",
  "joystick",
  "link-external",
  "log-in",
  "log-out",
  "microphone-off",
  "minus",
  "mouse",
  "move",
  "music",
  "notification",
  "package",
  "paragraph",
  "paste",
  "pencil",
  "pin",
  "plus",
  "power-off",
  "pulse",
  "save",
  "screenshot",
  "select-multiple",
  "share-alt",
  "share",
  "shield-alt",
  "shield",
  "shopping-bag",
  "shuffle",
  "sort",
  "star",
  "sun",
  "text",
  "trash",
  "trophy",
  "underline",
  "user-check",
  "user-circle",
  "user-minus",
  "user-plus",
  "user-x",
  "user",
  "barcode",
  "crown",
  "dislike",
  "down-arrow",
  "export",
  "first-aid",
  "flag",
  "history",
  "joystick-alt",
  "left-arrow",
  "like",
  "list-check",
  "poll",
  "radar",
  "redo",
  "reply-all",
  "reply",
  "repost",
  "revision",
  "right-arrow",
  "subdirectory-left",
  "subdirectory-right",
  "support",
  "timer",
  "undo",
  "up-arrow",
  "phone-call",
  "aperture",
  "film",
  "folder-open",
  "task",
  "server",
  "battery",
  "calendar-alt",
  "import",
  "ruler",
  "horizontal-center",
  "rotate-right",
  "rename",
  "collapse",
  "phone-incoming",
  "phone-outgoing",
  "body",
  "cast",
  "chip",
  "skip-next-circle",
  "skip-previous-circle",
  "hdd",
  "store",
  "globe-alt",
  "upvote",
  "downvote",
  "news",
  "pie-chart-alt",
  "images",
  "purchase-tag",
  "pen",
  "expand",
  "paperclip",
  "closet",
  "tv",
  "collection",
  "station",
  "wallet",
  "briefcase-alt",
  "hourglass",
  "carousel",
  "infinite",
  "plug",
  "notification-off",
  "window-close",
  "command",
  "grid-alt",
  "trash-alt",
  "chalkboard",
  "loader",
  "slider",
  "paper-plane",
  "selection",
  "world",
  "dock-bottom",
  "dock-right",
  "dock-top",
  "dock-left",
  "layout",
  "alarm-off",
  "wrench",
  "loader-circle",
  "loader-alt",
  "car",
  "cart-alt",
  "happy",
  "meh",
  "sad",
  "slider-alt",
  "certification",
  "rocket",
  "check-circle",
  "bus",
  "check-double",
  "dumbbell",
  "bot",
  "area",
  "bed",
  "bath",
  "train",
  "taxi",
  "movie",
  "hotel",
  "planet",
  "list-ol",
  "video-plus",
  "menu-alt-left",
  "menu-alt-right",
  "box",
  "restaurant",
  "swim",
  "water",
  "wind",
  "dialpad",
  "handicap",
  "font-size",
  "code-block",
  "photo-album",
  "strikethrough",
  "file-blank",
  "highlight",
  "font-color",
  "fingerprint",
  "transfer",
  "circle",
  "ball",
  "football",
  "dollar-circle",
  "search-alt",
  "analyse",
  "disc",
  "equalizer",
  "stats",
  "move-horizontal",
  "move-vertical",
  "grid-horizontal",
  "grid-vertical",
  "grid-small",
  "badge",
  "id-card",
  "sort-up",
  "sort-down",
  "note",
  "test-tube",
  "help-circle",
  "card",
  "rewind-circle",
  "magnet",
  "calendar-event",
  "caret-left",
  "caret-up",
  "caret-right",
  "caret-down",
  "show-alt",
  "badge-check",
  "rotate-left",
  "brush",
  "unlink",
  "paint",
  "joystick-button",
  "font-family",
  "repeat",
  "walk",
  "money",
  "home-circle",
  "buildings",
  "store-alt",
  "bar-chart-alt-2",
  "message-dots",
  "message-rounded-dots",
  "memory-card",
  "wallet-alt",
  "slideshow",
  "message-square",
  "message-square-dots",
  "book-content",
  "chat",
  "edit-alt",
  "mouse-alt",
  "bug-alt",
  "notepad",
  "video-recording",
  "shape-square",
  "shape-triangle",
  "ghost",
  "mail-send",
  "code-alt",
  "grid",
  "user-pin",
  "run",
  "copy-alt",
  "transfer-alt",
  "book-open",
  "landscape",
  "comment",
  "comment-dots",
  "pyramid",
  "cylinder",
  "lock-alt",
  "lock-open-alt",
  "left-arrow-alt",
  "right-arrow-alt",
  "up-arrow-alt",
  "down-arrow-alt",
  "shape-circle",
  "cycling",
  "dna",
  "bowling-ball",
  "search-alt-2",
  "plus-medical",
  "street-view",
  "droplet",
  "paint-roll",
  "shield-alt-2",
  "error-alt",
  "square",
  "square-rounded",
  "polygon",
  "cube-alt",
  "cuboid",
  "user-voice",
  "accessibility",
  "building-house",
  "doughnut-chart",
  "log-in-circle",
  "log-out-circle",
  "check-square",
  "message-alt",
  "message-alt-dots",
  "no-entry",
  "palette",
  "basket",
  "purchase-tag-alt",
  "receipt",
  "line-chart",
  "map-pin",
  "hive",
  "band-aid",
  "credit-card-alt",
  "wifi-off",
  "brightness-half",
  "brightness",
  "filter-alt",
  "dialpad-alt",
  "border-right",
  "border-left",
  "border-top",
  "border-bottom",
  "border-all",
  "mobile-landscape",
  "mobile-vibration",
  "gas-pump",
  "pie-chart-alt-2",
  "time-five",
  "briefcase-alt-2",
  "brush-alt",
  "customize",
  "radio",
  "printer",
  "sort-a-z",
  "sort-z-a",
  "conversation",
  "exit",
  "extension",
  "face",
  "file-find",
  "label",
  "check-shield",
  "border-radius",
  "add-to-queue",
  "archive-in",
  "archive-out",
  "alarm-add",
  "space-bar",
  "image-alt",
  "image-add",
  "fridge",
  "dish",
  "spa",
  "cake",
  "bolt-circle",
  "tone",
  "bitcoin",
  "lira",
  "ruble",
  "rupee",
  "euro",
  "pound",
  "won",
  "yen",
  "shekel",
  "health",
  "clinic",
  "male",
  "female",
  "male-sign",
  "female-sign",
  "food-tag",
  "food-menu",
  "meh-alt",
  "wink-tongue",
  "happy-alt",
  "cool",
  "tired",
  "smile",
  "angry",
  "happy-heart-eyes",
  "dizzy",
  "wink-smile",
  "confused",
  "sleepy",
  "shocked",
  "happy-beaming",
  "meh-blank",
  "laugh",
  "upside-down",
  "shield-quarter",
  "sticker"
];
const icons_s = [
  "dice-6",
  "dice-5",
  "dice-4",
  "dice-3",
  "dice-2",
  "dice-1",
  "calendar-week",
  "bowling-ball",
  "sticker",
  "pizza",
  "florist",
  "shapes",
  "ev-station",
  "edit-location",
  "book-reader",
  "arrow-to-bottom",
  "arrow-to-top",
  "arrow-to-left",
  "arrow-to-right",
  "arrow-from-right",
  "arrow-from-left",
  "arrow-from-bottom",
  "arrow-from-top",
  "been-here",
  "webcam",
  "radiation",
  "low-vision",
  "mask",
  "traffic-cone",
  "spray-can",
  "layer-minus",
  "layer-plus",
  "info-square",
  "home-heart",
  "heart-square",
  "heart-circle",
  "flag-checkered",
  "file-import",
  "file-export",
  "file-archive",
  "piano",
  "microchip",
  "pointer",
  "washer",
  "dryer",
  "chess",
  "coffee-togo",
  "car-crash",
  "car-mechanic",
  "car-garage",
  "car-wash",
  "calendar-edit",
  "cabinet",
  "bus-school",
  "bomb",
  "bible",
  "beer",
  "badge-dollar",
  "arch",
  "location-plus",
  "adjust",
  "alarm",
  "alarm-off",
  "album",
  "archive",
  "camera",
  "camera-off",
  "folder",
  "folder-plus",
  "award",
  "bar-chart-square",
  "barcode",
  "battery",
  "battery-charging",
  "battery-full",
  "bell",
  "bell-off",
  "bolt",
  "book",
  "book-bookmark",
  "bookmark",
  "bookmark-plus",
  "book-open",
  "bookmark-star",
  "briefcase",
  "briefcase-alt",
  "bug",
  "building",
  "bulb",
  "buoy",
  "calculator",
  "captions",
  "car",
  "cart-alt",
  "cart",
  "chart",
  "chip",
  "cloud-download",
  "cloud-upload",
  "cloud",
  "coffee",
  "cog",
  "collection",
  "contact",
  "copy",
  "coupon",
  "crown",
  "cube",
  "detail",
  "discount",
  "dislike",
  "dock-bottom",
  "dock-left",
  "dock-right",
  "dock-top",
  "down-arrow-circle",
  "download",
  "downvote",
  "drink",
  "droplet",
  "duplicate",
  "eject",
  "envelope",
  "error-circle",
  "error",
  "file-image",
  "file",
  "filter-alt",
  "first-aid",
  "flag-alt",
  "flag",
  "gift",
  "grid-alt",
  "group",
  "hdd",
  "heart",
  "hide",
  "home",
  "hot",
  "hourglass",
  "image",
  "inbox",
  "info-circle",
  "joystick-alt",
  "joystick",
  "layer",
  "left-arrow-circle",
  "like",
  "lock-open",
  "lock",
  "map-alt",
  "map",
  "message-rounded",
  "message",
  "microphone-off",
  "microphone",
  "minus-circle",
  "moon",
  "mouse",
  "music",
  "navigation",
  "news",
  "package",
  "paper-plane",
  "paste",
  "pen",
  "pencil",
  "phone-call",
  "phone-incoming",
  "phone-outgoing",
  "phone",
  "pie-chart-alt",
  "pie-chart",
  "pin",
  "playlist",
  "plug",
  "plus-circle",
  "printer",
  "purchase-tag",
  "quote-left",
  "quote-right",
  "radio",
  "rename",
  "report",
  "right-arrow-circle",
  "ruler",
  "save",
  "sort-alt",
  "select-multiple",
  "send",
  "server",
  "share-alt",
  "share",
  "shield",
  "shopping-bag-alt",
  "shopping-bag",
  "show",
  "spreadsheet",
  "star",
  "store",
  "sun",
  "t-shirt",
  "tag-x",
  "tag",
  "tennis-ball",
  "terminal",
  "to-top",
  "toggle-left",
  "toggle-right",
  "torch",
  "trash-alt",
  "trash",
  "trophy",
  "truck",
  "up-arrow-circle",
  "upvote",
  "user-circle",
  "user-detail",
  "user-minus",
  "user-plus",
  "user",
  "video-off",
  "video",
  "videos",
  "volume-full",
  "volume-low",
  "volume-mute",
  "volume",
  "wallet",
  "watch-alt",
  "watch",
  "widget",
  "wrench",
  "x-circle",
  "zap",
  "folder-open",
  "battery-low",
  "conversation",
  "dashboard",
  "file-plus",
  "certification",
  "rocket",
  "check-circle",
  "checkbox",
  "checkbox-checked",
  "star-half",
  "bus",
  "bot",
  "area",
  "bed",
  "bath",
  "train",
  "taxi",
  "movie",
  "planet",
  "video-plus",
  "box",
  "key",
  "photo-album",
  "bell-ring",
  "file-blank",
  "edit",
  "ball",
  "film",
  "dollar-circle",
  "skull",
  "image-alt",
  "microphone-alt",
  "x-square",
  "plus-square",
  "minus-square",
  "disc",
  "flame",
  "badge",
  "note",
  "help-circle",
  "card",
  "magnet",
  "ambulance",
  "left-arrow-square",
  "up-arrow-square",
  "down-arrow-square",
  "right-arrow-square",
  "user-badge",
  "gas-pump",
  "landmark",
  "badge-check",
  "coffee-alt",
  "brush",
  "keyboard",
  "megaphone",
  "directions",
  "direction-right",
  "joystick-button",
  "flask",
  "capsule",
  "color-fill",
  "hotel",
  "magic-wand",
  "eraser",
  "cloud-rain",
  "cloud-lightning",
  "eyedropper",
  "user-rectangle",
  "plane",
  "tree",
  "factory",
  "ship",
  "yin-yang",
  "file-pdf",
  "home-circle",
  "buildings",
  "store-alt",
  "bar-chart-alt-2",
  "message-dots",
  "message-rounded-dots",
  "devices",
  "memory-card",
  "wallet-alt",
  "bank",
  "slideshow",
  "message-square",
  "message-square-dots",
  "book-content",
  "chat",
  "edit-alt",
  "mouse-alt",
  "bug-alt",
  "notepad",
  "video-recording",
  "direction-left",
  "ghost",
  "quote-single-left",
  "quote-single-right",
  "user-pin",
  "copy-alt",
  "file-doc",
  "file-html",
  "file-css",
  "file-js",
  "file-json",
  "file-md",
  "file-txt",
  "file-png",
  "file-jpg",
  "file-gif",
  "analyse",
  "plane-take-off",
  "plane-land",
  "parking",
  "id-card",
  "adjust-alt",
  "landscape",
  "traffic",
  "comment",
  "comment-dots",
  "comment-detail",
  "wine",
  "pyramid",
  "cylinder",
  "vial",
  "graduation",
  "lock-alt",
  "lock-open-alt",
  "hourglass-top",
  "hourglass-bottom",
  "bowling-ball",
  "search-alt-2",
  "droplet-half",
  "comment-add",
  "paint-roll",
  "shield-alt-2",
  "error-alt",
  "square",
  "square-rounded",
  "polygon",
  "cube-alt",
  "cuboid",
  "user-voice",
  "comment-error",
  "building-house",
  "doughnut-chart",
  "circle",
  "log-in-circle",
  "log-out-circle",
  "log-in",
  "log-out",
  "notification",
  "notification-off",
  "check-square",
  "message-alt",
  "message-alt-dots",
  "no-entry",
  "traffic-barrier",
  "component",
  "plane-alt",
  "palette",
  "basket",
  "purchase-tag-alt",
  "receipt",
  "map-pin",
  "band-aid",
  "credit-card-alt",
  "credit-card",
  "paint",
  "brightness-half",
  "brightness",
  "rectangle",
  "right-arrow",
  "left-arrow",
  "up-arrow",
  "down-arrow",
  "right-top-arrow-circle",
  "right-down-arrow-circle",
  "left-top-arrow-circle",
  "left-down-arrow-circle",
  "institution",
  "school",
  "chalkboard",
  "skip-previous-circle",
  "skip-next-circle",
  "data",
  "mobile",
  "folder-minus",
  "bell-plus",
  "bell-minus",
  "search",
  "zoom-in",
  "zoom-out",
  "grid",
  "user-x",
  "user-check",
  "compass",
  "stopwatch",
  "timer",
  "time",
  "pie-chart-alt-2",
  "time-five",
  "bookmarks",
  "bookmark-minus",
  "briefcase-alt-2",
  "calendar",
  "calendar-alt",
  "calendar-plus",
  "calendar-minus",
  "calendar-x",
  "calendar-check",
  "calendar-event",
  "customize",
  "carousel",
  "rewind-circle",
  "fast-forward-circle",
  "mobile-vibration",
  "quote-alt-left",
  "quote-alt-right",
  "layout",
  "brush-alt",
  "exit",
  "extension",
  "file-find",
  "face",
  "label",
  "check-shield",
  "add-to-queue",
  "archive-in",
  "archive-out",
  "alarm-add",
  "image-add",
  "fridge",
  "dish",
  "spa",
  "cake",
  "city",
  "bolt-circle",
  "tone",
  "caret-up-circle",
  "caret-down-circle",
  "caret-right-circle",
  "caret-left-circle",
  "baby-carriage",
  "hand-up",
  "hand-right",
  "hand-down",
  "hand-left",
  "clinic",
  "offer",
  "food-menu",
  "camera-plus",
  "business",
  "angry",
  "happy-heart-eyes",
  "dizzy",
  "wink-smile",
  "smile",
  "meh",
  "meh-alt",
  "confused",
  "sleepy",
  "sad",
  "happy",
  "shocked",
  "happy-beaming",
  "tired",
  "cool",
  "meh-blank",
  "laugh",
  "happy-alt",
  "upside-down",
  "wink-tongue"];
const icons_l = [
  "facebook",
  "github",
  "google",
  "instagram",
  "twitter",
  "youtube",
  "whatsapp",
  "tumblr",
  "behance",
  "dribbble",
  "vimeo",
  "linkedin",
  "bitcoin",
  "facebook-square",
  "google-plus",
  "google-plus-circle",
  "linkedin-square",
  "medium",
  "medium-square",
  "skype",
  "slack-old",
  "slack",
  "twitch",
  "discord",
  "reddit",
  "pinterest",
  "blogger",
  "apple",
  "android",
  "play-store",
  "windows",
  "vk",
  "pocket",
  "messenger",
  "500px",
  "angular",
  "codepen",
  "creative-commons",
  "digitalocean",
  "deviantart",
  "discourse",
  "dropbox",
  "drupal",
  "ebay",
  "amazon",
  "digg",
  "unsplash",
  "wikipedia",
  "sass",
  "foursquare",
  "invision",
  "opera",
  "airbnb",
  "yelp",
  "quora",
  "git",
  "html5",
  "product-hunt",
  "magento",
  "stack-overflow",
  "firefox",
  "javascript",
  "nodejs",
  "kickstarter",
  "vuejs",
  "bing",
  "react",
  "periscope",
  "wordpress",
  "telegram",
  "stripe",
  "edge",
  "paypal",
  "internet-explorer",
  "joomla",
  "dailymotion",
  "chrome",
  "baidu",
  "visa",
  "mastercard",
  "redux",
  "bootstrap",
  "yahoo",
  "microsoft",
  "css3",
  "jsfiddle",
  "shopify",
  "flickr",
  "less",
  "snapchat",
  "soundcloud",
  "spotify",
  "trello",
  "wix",
  "mailchimp",
  "medium-old",
  "squarespace",
  "whatsapp-square",
  "flickr-square",
  "instagram-alt",
  "facebook-circle",
  "jquery",
  "imdb",
  "pinterest-alt",
  "adobe",
  "algolia",
  "audible",
  "figma",
  "etsy",
  "gitlab",
  "patreon",
  "redbubble"
];
    const $content = document.createDocumentFragment();
    const $prototype =document.getElementById("prototype");
    const $controls = document.getElementById("controls");

    icons_r.forEach(function (iconName) {
        const $div = document.createElement("div");
        $div.setAttribute("class", "icon");
        $div.innerHTML = `<div>${iconName}</div><box-icon type="regular" name="${iconName}"></box-icon>`;
        $content.appendChild($div);
    });
    icons_s.forEach(function (iconName) {
        const $div = document.createElement("div");
        $div.setAttribute("class", "icon");
        $div.innerHTML = `<div>${iconName}</div><box-icon type="solid" name="${iconName}"></box-icon>`;
        $content.appendChild($div);
    });
    icons_l.forEach(function (iconName) {
        const $div = document.createElement("div");
        $div.setAttribute("class", "icon");
        $div.innerHTML = `<div>${iconName}</div><box-icon type="logo" name="${iconName}"></box-icon>`;
        $content.appendChild($div);
    });

    $prototype.appendChild($content);

    const allIcons = $prototype.querySelectorAll("box-icon");
    const setIconAttr = function (attrName, ev) {
        allIcons.forEach($icon => {
            $icon.setAttribute(attrName, ev.target.value);
        });
    };

    $controls.querySelector("input[name='color']").addEventListener("input", setIconAttr.bind(null, "color"));
    $controls.querySelector("input[name='size']").addEventListener("input", setIconAttr.bind(null, "size"));
    $controls.querySelector("select[name='rotate']").addEventListener("input", setIconAttr.bind(null, "rotate"));
    $controls.querySelector("select[name='flip']").addEventListener("input", setIconAttr.bind(null, "flip"));
    $controls.querySelector("select[name='border']").addEventListener("input", setIconAttr.bind(null, "border"));
    $controls.querySelector("select[name='animation']").addEventListener("input", setIconAttr.bind(null, "animation"));
</script>
</body>
</html>