From a91ed7368f2a3f4ce610bf76de185dec518e4eaf Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Wed, 2 Dec 2020 22:39:43 +0100
Subject: [PATCH] Add icon component

---
 src/common/components/Icon.vue | 25 +++++++++++++++++++++++++
 src/csui/LoggerUi.vue          |  4 +++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/common/components/Icon.vue

diff --git a/src/common/components/Icon.vue b/src/common/components/Icon.vue
new file mode 100644
index 0000000..c15f436
--- /dev/null
+++ b/src/common/components/Icon.vue
@@ -0,0 +1,25 @@
+<template>
+  <svg class="bi" width="1em" height="1em" fill="currentColor">
+    <use :xlink:href=" '' + iconHref" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: String,
+  },
+  data() {
+    return {
+      bootstrapIconsBasePath: (browser ?? chrome).runtime.getURL('/res/icons/bootstrap-icons.svg'),
+      iconHref: '',
+    };
+  },
+  created() {
+    this.iconHref = `${this.bootstrapIconsBasePath}#${this.icon}`;
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/csui/LoggerUi.vue b/src/csui/LoggerUi.vue
index 023d790..d99a454 100644
--- a/src/csui/LoggerUi.vue
+++ b/src/csui/LoggerUi.vue
@@ -34,7 +34,7 @@
         </div>
         <div class="flex flex-row flex-end w100">
           <div v-if="!showTextMode" class="button" @click="showTextMode = true">
-            Paste config ...
+            <Icon icon="clipboard-plus" style="font-size: 2em"></Icon>&nbsp; Paste config ...
           </div>
           <div v-else class="button" @click="showTextMode = false">
             Back
@@ -164,10 +164,12 @@ import Logger from '../ext/lib/Logger';
 import Comms from '../ext/lib/comms/Comms';
 import IO from '../common/js/IO';
 import JsonObject from '../common/components/JsonEditor/JsonObject';
+import Icon from '../common/components/Icon';
 
 export default {
   components: {
     JsonObject,
+    Icon,
   },
   data() {
     return {