From 07d31761780d72b82146e60bf1c08e4704d7268b Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Sat, 6 Nov 2021 22:11:09 -0400
Subject: [PATCH] Switch to unplugin-icons for icons

The following icons are used:
Material Design Light
- Chevron Left (Hide Sidebar)
- Chevron Right (Show Sidebar)
- Chevron Double Down (Page Down)
- Magnify (Search)
- Cog (Settings)

Octicon
- Trash 24 (Clear Logs)
- Download 24 (Download Logs)
- Container 24 (Container Listing)

CoreUI Free
- Columns (Pin as Column)
---
 assets/App.vue                          |  19 ++-
 assets/components/FuzzySearchModal.vue  |  16 ++-
 assets/components/Icon.vue              |  32 -----
 assets/components/LogActionsToolbar.vue |  22 ++--
 assets/components/ScrollableView.vue    |  13 +-
 assets/components/Search.vue            |   6 +-
 assets/components/SideMenu.vue          |  26 ++--
 assets/index.ejs                        |  64 ----------
 assets/pages/Index.vue                  |   6 +-
 assets/pages/Settings.vue               |   4 -
 package.json                            |  24 ++--
 pnpm-lock.yaml                          | 158 ++++++++++++++++++++++++
 webpack.config.js                       |   5 +
 13 files changed, 245 insertions(+), 150 deletions(-)
 delete mode 100644 assets/components/Icon.vue

diff --git a/assets/App.vue b/assets/App.vue
index 3fd85d4c..86945080 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -27,13 +27,16 @@
     </splitpanes>
     <button
       @click="collapseNav = !collapseNav"
-      class="button is-small is-rounded is-settings-control"
+      class="button is-small is-rounded is-settings-control pl-1 pr-1"
       :class="{ collapsed: collapseNav }"
       id="hide-nav"
       v-if="!isMobile && !authorizationNeeded"
     >
-      <span class="icon">
-        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
+      <span class="pl-6 pr-2" v-if="collapseNav">
+        <chevron-right-icon />
+      </span>
+      <span v-else>
+        <chevron-left-icon />
       </span>
     </button>
   </main>
@@ -50,19 +53,22 @@ import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";
 
 import PastTime from "./components/PastTime";
-import Icon from "./components/Icon";
 import FuzzySearchModal from "./components/FuzzySearchModal";
 
+import ChevronLeftIcon from "~icons/mdi-light/chevron-left";
+import ChevronRightIcon from "~icons/mdi-light/chevron-right";
+
 export default {
   name: "App",
   components: {
-    Icon,
     SideMenu,
     LogContainer,
     MobileMenu,
     Splitpanes,
     PastTime,
     Pane,
+    ChevronLeftIcon,
+    ChevronRightIcon,
   },
   data() {
     return {
@@ -168,6 +174,9 @@ export default {
   position: fixed;
   left: 10px;
   bottom: 10px;
+  & svg {
+    vertical-align: middle;
+  }
   &.collapsed {
     left: -40px;
     width: 60px;
diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index 5645c5c5..a1964137 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -14,14 +14,16 @@
       <template slot-scope="props">
         <div class="media">
           <div class="media-left">
-            <span class="icon is-small" :class="props.option.state"><icon name="crate"></icon></span>
+            <span class="icon is-small" :class="props.option.state">
+              <container-icon />
+            </span>
           </div>
           <div class="media-content">
             {{ props.option.name }}
           </div>
           <div class="media-right">
             <span class="icon is-small column-icon" @click.stop.prevent="addColumn(props.option)" title="Pin as column">
-              <icon name="column"></icon>
+              <columns-icon />
             </span>
           </div>
         </div>
@@ -35,7 +37,8 @@ import { mapState, mapActions } from "vuex";
 import fuzzysort from "fuzzysort";
 
 import PastTime from "./PastTime";
-import Icon from "./Icon";
+import ContainerIcon from "~icons/octicon/container-24";
+import ColumnsIcon from "~icons/cil/columns";
 
 export default {
   props: {
@@ -51,8 +54,9 @@ export default {
   },
   name: "FuzzySearchModal",
   components: {
-    Icon,
     PastTime,
+    ContainerIcon,
+    ColumnsIcon,
   },
   mounted() {
     this.$nextTick(() => this.$refs.autocomplete.focus());
@@ -131,4 +135,8 @@ export default {
     visibility: visible;
   }
 }
+
+.icon {
+  vertical-align: middle;
+}
 </style>
diff --git a/assets/components/Icon.vue b/assets/components/Icon.vue
deleted file mode 100644
index f8f9e957..00000000
--- a/assets/components/Icon.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template functional>
-  <svg class="icomoon" :class="['icon-' + props.name]">
-    <use :href="'#icon-' + props.name"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      required: true,
-      type: String,
-    },
-  },
-  name: "Icon",
-};
-</script>
-<style lang="scss" scoped>
-.icomoon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-
-  .icon:not(.keep-size) & {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
diff --git a/assets/components/LogActionsToolbar.vue b/assets/components/LogActionsToolbar.vue
index d24a2ffd..1f04200c 100644
--- a/assets/components/LogActionsToolbar.vue
+++ b/assets/components/LogActionsToolbar.vue
@@ -2,23 +2,19 @@
   <div class="toolbar mr-0 is-vcentered is-hidden-mobile">
     <div class="is-flex">
       <b-tooltip type="is-dark" label="Clear">
-        <a @click="onClearClicked" class="button is-small is-light is-inverted" id="clear">
-          <span class="icon">
-            <icon name="bin"></icon>
-          </span>
+        <a @click="onClearClicked" class="button is-small is-light is-inverted pl-1 pr-1" id="clear">
+          <clear-icon />
         </a>
       </b-tooltip>
       <div class="is-flex-grow-1"></div>
       <b-tooltip type="is-dark" label="Download">
         <a
-          class="button is-small is-light is-inverted"
+          class="button is-small is-light is-inverted pl-1 pr-1"
           id="download"
           :href="`${base}/api/logs/download?id=${container.id}`"
           download
         >
-          <span class="icon">
-            <icon name="save"></icon>
-          </span>
+          <download-icon />
         </a>
       </b-tooltip>
     </div>
@@ -28,7 +24,8 @@
 <script>
 import config from "../store/config";
 import hotkeys from "hotkeys-js";
-import Icon from "./Icon";
+import DownloadIcon from "~icons/octicon/download-24";
+import ClearIcon from "~icons/octicon/trash-24";
 
 export default {
   props: {
@@ -42,7 +39,8 @@ export default {
   },
   name: "LogActionsToolbar",
   components: {
-    Icon,
+    DownloadIcon,
+    ClearIcon,
   },
   computed: {
     base() {
@@ -87,6 +85,10 @@ export default {
 
   .button {
     background-color: rgba(0, 0, 0, 0) !important;
+
+    &.is-small {
+      font-size: 0.65rem;
+    }
   }
 }
 </style>
diff --git a/assets/components/ScrollableView.vue b/assets/components/ScrollableView.vue
index ce350fab..ed4e972b 100644
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -13,8 +13,13 @@
 
     <div class="is-scrollbar-notification">
       <transition name="fade">
-        <button class="button" :class="hasMore ? 'has-more' : ''" @click="scrollToBottom('instant')" v-show="paused">
-          <icon name="chevrons-down"></icon>
+        <button
+          class="button pl-1 pr-1"
+          :class="hasMore ? 'has-more' : ''"
+          @click="scrollToBottom('instant')"
+          v-show="paused"
+        >
+          <chevron-double-down-icon />
         </button>
       </transition>
     </div>
@@ -22,8 +27,8 @@
 </template>
 
 <script>
-import Icon from "./Icon";
 import ScrollProgress from "./ScrollProgress";
+import ChevronDoubleDownIcon from "~icons/mdi-light/chevron-double-down";
 
 export default {
   props: {
@@ -33,8 +38,8 @@ export default {
     },
   },
   components: {
-    Icon,
     ScrollProgress,
+    ChevronDoubleDownIcon,
   },
   name: "ScrollableView",
   data() {
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index d4df63f4..d15dd234 100644
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -11,7 +11,7 @@
           @keyup.esc="resetSearch()"
         />
         <span class="icon is-left">
-          <icon name="search"></icon>
+          <search-icon />
         </span>
       </p>
     </div>
@@ -24,13 +24,13 @@
 <script>
 import { mapActions, mapState } from "vuex";
 import hotkeys from "hotkeys-js";
-import Icon from "./Icon";
+import SearchIcon from "~icons/mdi-light/magnify";
 
 export default {
   props: [],
   name: "Search",
   components: {
-    Icon,
+    SearchIcon,
   },
   data() {
     return {
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index e0e1ad31..5e580c5d 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -10,24 +10,20 @@
       </div>
       <div class="column is-narrow has-text-right px-1">
         <button
-          class="button is-small is-rounded is-settings-control"
+          class="button is-small is-rounded is-settings-control pl-1 pr-1"
           @click="$emit('search')"
           title="Search containers (⌘ + k, ⌃k)"
         >
-          <span class="icon">
-            <icon name="search"></icon>
-          </span>
+          <search-icon />
         </button>
       </div>
       <div class="column is-narrow has-text-right px-0">
         <router-link
           :to="{ name: 'settings' }"
           active-class="is-active"
-          class="button is-small is-rounded is-settings-control"
+          class="button is-small is-rounded is-settings-control pl-1 pr-1"
         >
-          <span class="icon">
-            <icon name="cog"></icon>
-          </span>
+          <settings-icon />
         </router-link>
       </div>
     </div>
@@ -50,7 +46,7 @@
                 v-show="!activeContainersById[item.id]"
                 title="Pin as column"
               >
-                <icon name="column"></icon>
+                <columns-icon />
               </span>
             </div>
           </div>
@@ -63,13 +59,17 @@
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";
 
-import Icon from "./Icon";
+import SearchIcon from "~icons/mdi-light/magnify";
+import SettingsIcon from "~icons/mdi-light/cog";
+import ColumnsIcon from "~icons/cil/columns";
 
 export default {
   props: [],
   name: "SideMenu",
   components: {
-    Icon,
+    SearchIcon,
+    SettingsIcon,
+    ColumnsIcon,
   },
   data() {
     return {};
@@ -116,6 +116,10 @@ li.exited a {
 .menu-list li {
   .column-icon {
     visibility: hidden;
+
+    & > span {
+      vertical-align: middle;
+    }
   }
 
   &:hover .column-icon {
diff --git a/assets/index.ejs b/assets/index.ejs
index e8adf249..f3e96adc 100644
--- a/assets/index.ejs
+++ b/assets/index.ejs
@@ -22,75 +22,11 @@
       xmlns:xlink="http://www.w3.org/1999/xlink"
     >
       <defs>
-        <symbol id="icon-check" viewBox="0 0 24 24">
-          <path
-            d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevron-down" viewBox="0 0 24 24">
-          <path
-            d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevron-left" viewBox="0 0 24 24">
-          <path
-            d="M15.707 17.293l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414l6 6c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevron-right" viewBox="0 0 24 24">
-          <path
-            d="M9.707 18.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"
-          ></path>
-        </symbol>
-        <symbol id="icon-chevrons-down" viewBox="0 0 24 24">
-          <path
-            d="M6.293 13.707l5 5c0.391 0.391 1.024 0.391 1.414 0l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-4.293 4.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM6.293 6.707l5 5c0.391 0.391 1.024 0.391 1.414 0l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-4.293 4.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
-          ></path>
-        </symbol>
-        <symbol id="icon-download" viewBox="0 0 24 24">
-          <path d="M15.6 9.6v-7.2h-7.2v7.2h-6l9.6 9.6 9.6-9.6h-6zM0 21.6h24v2.4h-24v-2.4z"></path>
-        </symbol>
-        <symbol id="icon-pin" viewBox="0 0 24 24">
-          <path
-            d="M13.2 14.4h7.2v-1.2l-3.6-1.2v-9.6l3.6-1.2v-1.2h-16.8v1.2l3.6 1.2v9.6l-3.6 1.2v1.2h7.2v8.4l1.2 1.2 1.2-1.2v-8.4z"
-          ></path>
-        </symbol>
-        <symbol id="icon-search" viewBox="0 0 24 24">
-          <path
-            d="M15.48 17.184c-1.608 1.259-3.66 2.019-5.889 2.019-5.302 0-9.6-4.298-9.6-9.6s4.298-9.6 9.6-9.6c5.302 0 9.6 4.298 9.6 9.6 0 2.229-0.76 4.281-2.035 5.91l0.016-0.021 6.42 6.396-1.704 1.704-6.396-6.408zM9.6 16.8c3.976 0 7.2-3.224 7.2-7.2s-3.224-7.2-7.2-7.2v0c-3.976 0-7.2 3.224-7.2 7.2s3.224 7.2 7.2 7.2v0z"
-          ></path>
-        </symbol>
-        <symbol id="icon-cog" viewBox="0 0 24 24">
-          <path
-            d="M21.886 14.303c-1.259-2.181-0.502-4.976 1.691-6.246l-2.358-4.085c-0.674 0.395-1.457 0.622-2.293 0.622-2.52 0-4.563-2.057-4.563-4.594h-4.717c0.006 0.783-0.189 1.577-0.608 2.303-1.259 2.181-4.058 2.923-6.255 1.658l-2.358 4.085c0.679 0.386 1.267 0.951 1.685 1.675 1.257 2.178 0.504 4.967-1.681 6.24l2.358 4.085c0.671-0.391 1.451-0.615 2.283-0.615 2.512 0 4.55 2.044 4.563 4.569h4.717c-0.002-0.775 0.194-1.56 0.609-2.279 1.257-2.177 4.049-2.92 6.244-1.664l2.358-4.085c-0.675-0.386-1.258-0.949-1.674-1.669zM12 16.859c-2.684 0-4.859-2.176-4.859-4.859s2.176-4.859 4.859-4.859c2.684 0 4.859 2.176 4.859 4.859s-2.176 4.859-4.859 4.859z"
-          ></path>
-        </symbol>
         <symbol id="logo" viewBox="0 0 145 64">
           <path
             d="M15.12 18.016C20.848 18.016 25.104 19.456 27.888 22.336C30.672 25.184 32.064 29.28 32.064 34.624C32.064 38.112 31.376 41.168 30 43.792C28.656 46.384 26.688 48.4 24.096 49.84C21.504 51.28 18.368 52 14.688 52C13.984 52 12.944 51.984 11.568 51.952C10.192 51.888 8.992 51.856 7.968 51.856C6.848 51.856 5.744 51.872 4.656 51.904C3.568 51.904 2.688 51.936 2.016 52V51.04C3.104 50.976 3.92 50.848 4.464 50.656C5.04 50.464 5.424 50.08 5.616 49.504C5.808 48.928 5.904 48.064 5.904 46.912V23.104C5.904 21.92 5.808 21.056 5.616 20.512C5.424 19.936 5.04 19.552 4.464 19.36C3.92 19.136 3.104 19.008 2.016 18.976V18.016C2.688 18.048 3.568 18.096 4.656 18.16C5.744 18.192 6.816 18.192 7.872 18.16C8.992 18.128 10.256 18.096 11.664 18.064C13.072 18.032 14.224 18.016 15.12 18.016ZM13.92 18.88C12.448 18.88 11.488 19.152 11.04 19.696C10.592 20.24 10.368 21.344 10.368 23.008V47.008C10.368 48.672 10.592 49.776 11.04 50.32C11.52 50.864 12.496 51.136 13.968 51.136C17.456 51.136 20.16 50.512 22.08 49.264C24 47.984 25.344 46.128 26.112 43.696C26.88 41.264 27.264 38.304 27.264 34.816C27.264 29.44 26.272 25.44 24.288 22.816C22.336 20.192 18.88 18.88 13.92 18.88ZM47.8395 26.608C49.8875 26.608 51.7275 27.056 53.3595 27.952C54.9915 28.848 56.2875 30.256 57.2475 32.176C58.2395 34.096 58.7355 36.592 58.7355 39.664C58.7355 42.736 58.2395 45.232 57.2475 47.152C56.2875 49.04 54.9915 50.432 53.3595 51.328C51.7275 52.224 49.8875 52.672 47.8395 52.672C45.8235 52.672 43.9835 52.224 42.3195 51.328C40.6875 50.432 39.3755 49.04 38.3835 47.152C37.4235 45.232 36.9435 42.736 36.9435 39.664C36.9435 36.592 37.4235 34.096 38.3835 32.176C39.3755 30.256 40.6875 28.848 42.3195 27.952C43.9835 27.056 45.8235 26.608 47.8395 26.608ZM47.8395 27.568C46.0155 27.568 44.5115 28.512 43.3275 30.4C42.1755 32.288 41.5995 35.376 41.5995 39.664C41.5995 43.952 42.1755 47.04 43.3275 48.928C44.5115 50.784 46.0155 51.712 47.8395 51.712C49.6635 51.712 51.1515 50.784 52.3035 48.928C53.4875 47.04 54.0795 43.952 54.0795 39.664C54.0795 35.376 53.4875 32.288 52.3035 30.4C51.1515 28.512 49.6635 27.568 47.8395 27.568ZM82.0564 27.04L68.1844 51.28H73.4644C74.7444 51.28 75.8484 51.024 76.7764 50.512C77.7364 50 78.5044 49.184 79.0804 48.064C79.6564 46.912 80.0084 45.408 80.1364 43.552H81.2404C81.2404 45.6 81.2564 47.328 81.2884 48.736C81.3204 50.144 81.3684 51.296 81.4324 52.192C80.0244 52.128 78.5524 52.08 77.0164 52.048C75.5124 52.016 74.0084 52 72.5044 52C70.9044 52 69.2724 52.016 67.6084 52.048C65.9444 52.112 64.3444 52.176 62.8084 52.24L76.6804 28H71.4004C69.9924 28 68.8084 28.256 67.8484 28.768C66.9204 29.28 66.2004 30.112 65.6884 31.264C65.2084 32.384 64.8884 33.872 64.7284 35.728H63.6244C63.6244 33.648 63.6084 31.92 63.5764 30.544C63.5444 29.136 63.4964 27.984 63.4324 27.088C64.8404 27.152 66.2964 27.2 67.8004 27.232C69.3364 27.264 70.8564 27.28 72.3604 27.28C73.9604 27.28 75.5924 27.264 77.2564 27.232C78.9204 27.168 80.5204 27.104 82.0564 27.04ZM104.885 27.04L91.0125 51.28H96.2925C97.5725 51.28 98.6765 51.024 99.6045 50.512C100.565 50 101.333 49.184 101.909 48.064C102.485 46.912 102.837 45.408 102.965 43.552H104.069C104.069 45.6 104.085 47.328 104.117 48.736C104.149 50.144 104.197 51.296 104.261 52.192C102.853 52.128 101.381 52.08 99.8445 52.048C98.3405 52.016 96.8365 52 95.3325 52C93.7325 52 92.1005 52.016 90.4365 52.048C88.7725 52.112 87.1725 52.176 85.6365 52.24L99.5085 28H94.2285C92.8205 28 91.6365 28.256 90.6765 28.768C89.7485 29.28 89.0285 30.112 88.5165 31.264C88.0365 32.384 87.7165 33.872 87.5565 35.728H86.4525C86.4525 33.648 86.4365 31.92 86.4045 30.544C86.3725 29.136 86.3245 27.984 86.2605 27.088C87.6685 27.152 89.1245 27.2 90.6285 27.232C92.1645 27.264 93.6845 27.28 95.1885 27.28C96.7885 27.28 98.4205 27.264 100.085 27.232C101.749 27.168 103.349 27.104 104.885 27.04ZM115.665 14.368V47.536C115.665 48.88 115.937 49.792 116.481 50.272C117.057 50.752 118.001 50.992 119.313 50.992V52C118.769 51.968 117.937 51.936 116.817 51.904C115.729 51.84 114.625 51.808 113.505 51.808C112.417 51.808 111.313 51.84 110.193 51.904C109.073 51.936 108.241 51.968 107.697 52V50.992C109.009 50.992 109.937 50.752 110.481 50.272C111.057 49.792 111.345 48.88 111.345 47.536V20.128C111.345 18.688 111.089 17.632 110.577 16.96C110.065 16.256 109.105 15.904 107.697 15.904V14.896C108.721 14.992 109.713 15.04 110.673 15.04C111.601 15.04 112.481 14.992 113.313 14.896C114.177 14.768 114.961 14.592 115.665 14.368ZM132.962 26.608C135.778 26.608 137.97 27.472 139.538 29.2C141.138 30.896 141.938 33.552 141.938 37.168H124.994L124.946 36.256H137.33C137.394 34.688 137.266 33.248 136.946 31.936C136.626 30.592 136.114 29.52 135.41 28.72C134.738 27.92 133.858 27.52 132.77 27.52C131.298 27.52 129.986 28.256 128.834 29.728C127.714 31.2 127.042 33.536 126.818 36.736L126.962 36.928C126.898 37.408 126.85 37.936 126.818 38.512C126.786 39.088 126.77 39.664 126.77 40.24C126.77 42.416 127.122 44.288 127.826 45.856C128.53 47.424 129.442 48.624 130.562 49.456C131.714 50.256 132.898 50.656 134.114 50.656C135.554 50.656 136.882 50.304 138.098 49.6C139.314 48.896 140.338 47.648 141.17 45.856L142.13 46.24C141.778 47.296 141.202 48.32 140.402 49.312C139.602 50.304 138.594 51.12 137.378 51.76C136.162 52.368 134.754 52.672 133.154 52.672C130.85 52.672 128.866 52.144 127.202 51.088C125.57 50.032 124.306 48.576 123.41 46.72C122.546 44.832 122.114 42.672 122.114 40.24C122.114 37.424 122.562 35.008 123.458 32.992C124.354 30.944 125.618 29.376 127.25 28.288C128.882 27.168 130.786 26.608 132.962 26.608Z"
           />
         </symbol>
-        <symbol id="icon-save" viewBox="0 0 32 32">
-          <path d="M23 14l-8 8-8-8h5v-12h6v12zM15 22h-15v8h30v-8h-15zM28 26h-4v-2h4v2z"></path>
-        </symbol>
-        <symbol id="icon-crate" viewBox="0 0 512 512">
-          <path
-            d="M137.484 68.427l-88.018 50.812 207.879 120.013 88.021-50.813L137.484 68.427zm326.394 51.595L256.001 0 176.14 46.11l207.883 120.009 79.855-46.097zM275.327 273.503V512l207.21-119.628V153.877l-207.21 119.626zM29.463 392.372l207.203 119.622V271.95L29.463 152.331v240.041z"
-          />
-        </symbol>
-        <symbol id="icon-column" viewBox="0 0 1792 1792">
-          <path
-            d="M224 1536h608V384H192v1120q0 13 9.5 22.5t22.5 9.5zm1376-32V384H960v1152h608q13 0 22.5-9.5t9.5-22.5zm128-1216v1216q0 66-47 113t-113 47H224q-66 0-113-47t-47-113V288q0-66 47-113t113-47h1344q66 0 113 47t47 113z"
-          />
-        </symbol>
-        <symbol id="icon-bin" viewBox="0 0 16 16">
-          <path
-            d="M2 5v10c0 0.55 0.45 1 1 1h9c0.55 0 1-0.45 1-1v-10h-11zM5 14h-1v-7h1v7zM7 14h-1v-7h1v7zM9 14h-1v-7h1v7zM11 14h-1v-7h1v7z"
-          ></path>
-          <path
-            d="M13.25 2h-3.25v-1.25c0-0.412-0.338-0.75-0.75-0.75h-3.5c-0.412 0-0.75 0.338-0.75 0.75v1.25h-3.25c-0.413 0-0.75 0.337-0.75 0.75v1.25h13v-1.25c0-0.413-0.338-0.75-0.75-0.75zM9 2h-3v-0.987h3v0.987z"
-          ></path>
-        </symbol>
       </defs>
     </svg>
     <div id="app"></div>
diff --git a/assets/pages/Index.vue b/assets/pages/Index.vue
index 14aeaf16..40d4627b 100644
--- a/assets/pages/Index.vue
+++ b/assets/pages/Index.vue
@@ -50,7 +50,7 @@
                 @keyup.enter="onEnter()"
               />
               <span class="icon is-left">
-                <icon name="search"></icon>
+                <search-icon />
               </span>
             </p>
           </div>
@@ -78,14 +78,14 @@
 
 <script>
 import { mapState } from "vuex";
-import Icon from "../components/Icon";
+import SearchIcon from "~icons/mdi-light/magnify";
 import PastTime from "../components/PastTime";
 import config from "../store/config";
 import fuzzysort from "fuzzysort";
 
 export default {
   name: "Index",
-  components: { Icon, PastTime },
+  components: { SearchIcon, PastTime },
   data() {
     return {
       version: config.version,
diff --git a/assets/pages/Settings.vue b/assets/pages/Settings.vue
index a4229fc8..f84b5f7d 100644
--- a/assets/pages/Settings.vue
+++ b/assets/pages/Settings.vue
@@ -92,15 +92,11 @@
 <script>
 import gt from "semver/functions/gt";
 import { mapActions, mapState } from "vuex";
-import Icon from "../components/Icon";
 import config from "../store/config";
 
 export default {
   props: [],
   name: "Settings",
-  components: {
-    Icon,
-  },
   data() {
     return {
       currentVersion: config.version,
diff --git a/package.json b/package.json
index 0a00271a..d879d9a9 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,16 @@
   "name": "dozzle",
   "version": "3.8.5",
   "description": "Realtime log viewer for docker containers. ",
+  "homepage": "https://github.com/amir20/dozzle#readme",
+  "bugs": {
+    "url": "https://github.com/amir20/dozzle/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amir20/dozzle.git"
+  },
+  "license": "ISC",
+  "author": "",
   "scripts": {
     "watch": "npm-run-all -p watch:*",
     "watch:assets": "webpack --mode=development --watch",
@@ -14,19 +24,12 @@
     "test": "TZ=UTC jest",
     "postinstall": "husky install"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/amir20/dozzle.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/amir20/dozzle/issues"
-  },
-  "homepage": "https://github.com/amir20/dozzle#readme",
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@babel/plugin-transform-runtime": "^7.15.8",
+    "@iconify-json/cil": "^1.0.1",
+    "@iconify-json/mdi-light": "^1.0.1",
+    "@iconify-json/octicon": "^1.0.5",
     "@vue/component-compiler-utils": "^3.3.0",
     "@vue/test-utils": "^1.2.2",
     "ansi-to-html": "^0.7.2",
@@ -54,6 +57,7 @@
     "semver": "^7.3.5",
     "splitpanes": "^2.3.8",
     "store": "^2.0.12",
+    "unplugin-icons": "^0.12.18",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.8",
     "vue-meta": "^2.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecffca36..8e7a4fd2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,9 @@ lockfileVersion: 5.3
 specifiers:
   '@babel/core': ^7.15.8
   '@babel/plugin-transform-runtime': ^7.15.8
+  '@iconify-json/cil': ^1.0.1
+  '@iconify-json/mdi-light': ^1.0.1
+  '@iconify-json/octicon': ^1.0.5
   '@vue/component-compiler-utils': ^3.3.0
   '@vue/test-utils': ^1.2.2
   ansi-to-html: ^0.7.2
@@ -37,6 +40,7 @@ specifiers:
   semver: ^7.3.5
   splitpanes: ^2.3.8
   store: ^2.0.12
+  unplugin-icons: ^0.12.18
   vue: ^2.6.14
   vue-hot-reload-api: ^2.3.4
   vue-jest: ^3.0.7
@@ -54,6 +58,9 @@ specifiers:
 dependencies:
   '@babel/core': 7.15.8
   '@babel/plugin-transform-runtime': 7.15.8_@babel+core@7.15.8
+  '@iconify-json/cil': 1.0.1
+  '@iconify-json/mdi-light': 1.0.1
+  '@iconify-json/octicon': 1.0.5
   '@vue/component-compiler-utils': 3.3.0
   '@vue/test-utils': 1.2.2_9065e7474e033a8e4b95615fc8e6c36c
   ansi-to-html: 0.7.2
@@ -81,6 +88,7 @@ dependencies:
   semver: 7.3.5
   splitpanes: 2.3.8
   store: 2.0.12
+  unplugin-icons: 0.12.18_8986e2f0d0e5bab383d14422bd902276
   vue: 2.6.14
   vue-loader: 15.9.8_b8abb2f94d6497e7a4f45f5ed040153c
   vue-meta: 2.4.0
@@ -106,6 +114,19 @@ devDependencies:
 
 packages:
 
+  /@antfu/install-pkg/0.1.0:
+    resolution: {integrity: sha512-VaIJd3d1o7irZfK1U0nvBsHMyjkuyMP3HKYVV53z8DKyulkHKmjhhtccXO51WSPeeSHIeoJEoNOKavYpS7jkZw==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: false
+
+  /@antfu/utils/0.3.0:
+    resolution: {integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA==}
+    dependencies:
+      '@types/throttle-debounce': 2.1.0
+    dev: false
+
   /@babel/code-frame/7.15.8:
     resolution: {integrity: sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==}
     engines: {node: '>=6.9.0'}
@@ -462,6 +483,34 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: true
 
+  /@iconify-json/cil/1.0.1:
+    resolution: {integrity: sha512-gLk0c25zSBtKKJWrGXVfQITeIdmvlSOiO/cKTVTQPG3W4qKh8V/wL3Fltb4j4iMPJgRVXylPPwKSwXbIDBDgZA==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
+  /@iconify-json/mdi-light/1.0.1:
+    resolution: {integrity: sha512-lbucb1t36lRRxEHNnJcROt0SRRRQgI6gmzj1Pv2qadrw/5mjLN6+OzOOCAIwCLDu//hU7xMkXDCw47aWtbRHaA==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
+  /@iconify-json/octicon/1.0.5:
+    resolution: {integrity: sha512-+D4xVN2Xw4hHaRclgJytkUCp7IXZZLN0jt6WNTPcTpUkVoOrBLDego+vWDVfuYASBhWuGYNUQA+HLwdmtJCFGQ==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
+  /@iconify/types/1.0.10:
+    resolution: {integrity: sha512-SN3z6einVeUckDQiE8p4POF7X4hk4/y2+a7a4ogJOCxX5XT6z1zXNN8dwS5O1vloXpc6mkHizRZm2qPnhK6NnQ==}
+    dev: false
+
+  /@iconify/utils/1.0.18:
+    resolution: {integrity: sha512-uCfJ7FdTxDk1DLKsvynTsYX4LnkGIDw+LCpoY0mRdl+NrNPCjYZ8HHYs4xzmo7cryRe0ZT0yuF2f3oipPIHn8w==}
+    dependencies:
+      '@iconify/types': 1.0.10
+    dev: false
+
   /@istanbuljs/load-nyc-config/1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -1326,6 +1375,10 @@ packages:
     resolution: {integrity: sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==}
     dev: true
 
+  /@types/throttle-debounce/2.1.0:
+    resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
+    dev: false
+
   /@types/yargs-parser/20.2.1:
     resolution: {integrity: sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==}
 
@@ -2387,6 +2440,12 @@ packages:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
+  /builtins/4.0.0:
+    resolution: {integrity: sha512-qC0E2Dxgou1IHhvJSLwGDSTvokbRovU5zZFuDY6oY8Y2lF3nGt5Ad8YZK7GMtqzY84Wu7pXTPeHQeHcXSXsRhw==}
+    dependencies:
+      semver: 7.3.5
+    dev: false
+
   /bulma/0.9.3:
     resolution: {integrity: sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==}
     dev: false
@@ -3553,6 +3612,14 @@ packages:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
+  /find-up/5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: false
+
   /flat/5.0.2:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
     hasBin: true
@@ -4081,6 +4148,12 @@ packages:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
 
+  /import-meta-resolve/1.1.1:
+    resolution: {integrity: sha512-JiTuIvVyPaUg11eTrNDx5bgQ/yMKMZffc7YSjvQeSMXy58DO2SQ8BtAf3xteZvmzvjYh14wnqNjL8XVeDy2o9A==}
+    dependencies:
+      builtins: 4.0.0
+    dev: false
+
   /imurmurhash/0.1.4:
     resolution: {integrity: sha1-khi5srkoojixPcT7a21XbyMUU+o=}
     engines: {node: '>=0.8.19'}
@@ -5133,6 +5206,10 @@ packages:
     engines: {node: '>= 8'}
     dev: false
 
+  /kolorist/1.5.0:
+    resolution: {integrity: sha512-pPobydIHK884YBtkS/tWSZXpSAEpcMbilyun3KL37ot935qL2HNKm/tI45i/Rd+MxdIWEhm7/LmUQzWZYK+Qhg==}
+    dev: false
+
   /latest-version/5.1.0:
     resolution: {integrity: sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==}
     engines: {node: '>=8'}
@@ -5229,12 +5306,26 @@ packages:
       json5: 1.0.1
     dev: false
 
+  /local-pkg/0.4.0:
+    resolution: {integrity: sha512-2XBWjO/v63JeR1HPzLJxdTVRQDB84Av2p2KtBA5ahvpyLUPubcAU6iXlAJrONcY7aSqgJhXxElAnKtnYsRolPQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 0.2.10
+    dev: false
+
   /locate-path/5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
     dependencies:
       p-locate: 4.1.0
 
+  /locate-path/6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: false
+
   /lodash.debounce/4.0.8:
     resolution: {integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=}
     dev: false
@@ -5443,6 +5534,12 @@ packages:
     dependencies:
       minimist: 1.2.5
 
+  /mlly/0.2.10:
+    resolution: {integrity: sha512-xfyW6c2QBGArtctzNnTV5leOKX8nOMz2simeubtXofdsdSJFSNw+Ncvrs8kxcN3pBrQLXuYBHNFV6NgZ5Ryf4A==}
+    dependencies:
+      import-meta-resolve: 1.1.1
+    dev: false
+
   /ms/2.0.0:
     resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
 
@@ -5772,6 +5869,13 @@ packages:
     dependencies:
       p-limit: 2.3.0
 
+  /p-locate/5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: false
+
   /p-map/4.0.0:
     resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
     engines: {node: '>=10'}
@@ -7253,6 +7357,56 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /unplugin-icons/0.12.18_8986e2f0d0e5bab383d14422bd902276:
+    resolution: {integrity: sha512-o2nc6AGGk4StTx5xMTndVBylszRg/hJvHMO1eEFfrfw9yh+eedre2S4F8EHltn3FjADL2a17GpXcvCAwmONgXA==}
+    peerDependencies:
+      '@svgr/core': ^5.5.0
+      '@vue/compiler-sfc': ^3.0.2
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.0
+      '@antfu/utils': 0.3.0
+      '@iconify/utils': 1.0.18
+      debug: 4.3.2
+      kolorist: 1.5.0
+      local-pkg: 0.4.0
+      unplugin: 0.2.20_webpack@5.61.0
+      vue-template-compiler: 2.6.14
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vite
+      - webpack
+    dev: false
+
+  /unplugin/0.2.20_webpack@5.61.0:
+    resolution: {integrity: sha512-CGnCaTqNjqeixpIlNEkpysxfR2hb4xv21xa4IURXnhYTfCp73UWuG0KcdanuhFJbwO5w+EGK4XaAaqdb/1vWbg==}
+    peerDependencies:
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      webpack: 5.61.0_webpack-cli@4.9.1
+      webpack-virtual-modules: 0.4.3
+    dev: false
+
   /update-notifier/5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
@@ -7608,6 +7762,10 @@ packages:
     engines: {node: '>=10.13.0'}
     dev: false
 
+  /webpack-virtual-modules/0.4.3:
+    resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
+    dev: false
+
   /webpack/5.61.0_webpack-cli@4.9.1:
     resolution: {integrity: sha512-fPdTuaYZ/GMGFm4WrPi2KRCqS1vDp773kj9S0iI5Uc//5cszsFEDgHNaX4Rj1vobUiU1dFIV3mA9k1eHeluFpw==}
     engines: {node: '>=10.13.0'}
diff --git a/webpack.config.js b/webpack.config.js
index c4c5a971..bdc540f6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@ const { VueLoaderPlugin } = require("vue-loader");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WebpackPwaManifest = require("webpack-pwa-manifest");
+const Icons = require("unplugin-icons/webpack");
 
 module.exports = (env, argv) => ({
   stats: { children: false, entrypoints: false, modules: false },
@@ -59,6 +60,10 @@ module.exports = (env, argv) => ({
       background_color: "#222",
       display: "standalone",
     }),
+    Icons({
+      compiler: "vue2",
+      scale: 2,
+    }),
   ],
   resolve: {
     alias: {