From 5a6d3eb7c4d1db56c604a8a156a615800bcaaa78 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 31 Aug 2022 00:29:01 +0530
Subject: [PATCH 01/41] feat(gui): add icon pack and load all icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/app.vue           |   1 +
 packages/nc-gui/nuxt.config.ts    |   6 +
 packages/nc-gui/package-lock.json | 200 ++++++++++++++++++++++++++++++
 packages/nc-gui/package.json      |   2 +
 4 files changed, 209 insertions(+)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index 32480b0839..b3c147e5e1 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@purge-icons/generated'
 import { applyNonSelectable, computed, useRoute, useTheme } from '#imports'
 
 const route = useRoute()
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index 0778081d12..81449670d9 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -7,6 +7,8 @@ import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
 
+import PurgeIcons from 'vite-plugin-purge-icons'
+
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   modules: ['@vueuse/nuxt', 'nuxt-windicss', '@nuxt/image-edge'],
@@ -138,6 +140,10 @@ export default defineNuxtConfig({
       monacoEditorPlugin({
         languageWorkers: ['json'],
       }),
+      PurgeIcons({
+        /* PurgeIcons Options */
+        includedCollections: ['emojione'],
+      }),
     ],
     define: {
       'process.env.DEBUG': 'false',
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index c4a1c9ac9a..c05611aa7a 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -9,6 +9,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
+        "@iconify/iconify": "^2.2.1",
         "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
@@ -86,6 +87,7 @@
         "unplugin-icons": "^0.14.7",
         "unplugin-vue-components": "^0.22.4",
         "vite-plugin-monaco-editor": "^1.1.0",
+        "vite-plugin-purge-icons": "^0.9.0",
         "vitest": "^0.18.0",
         "windicss": "^3.5.6"
       }
@@ -1204,6 +1206,14 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify/iconify": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
+      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "funding": {
+        "url": "http://github.com/sponsors/cyberalien"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -2568,6 +2578,49 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@purge-icons/core": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@purge-icons/core/-/core-0.9.1.tgz",
+      "integrity": "sha512-sx8/a30MbbqQVEqhuMPE1wJpdVRRbEmwEPZpFzVkcDixzX4p+R2A0WVxqkb0xfHUBAVQwrSE2SeAyniIQLqbLw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/iconify": "2.1.2",
+        "axios": "^0.26.0",
+        "debug": "^4.3.3",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^10.0.1"
+      }
+    },
+    "node_modules/@purge-icons/core/node_modules/@iconify/iconify": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.1.2.tgz",
+      "integrity": "sha512-QcUzFeEWkE/mW+BVtEGmcWATClcCOIJFiYUD/PiCWuTcdEA297o8D4oN6Ra44WrNOHu1wqNW4J0ioaDIiqaFOQ==",
+      "dev": true,
+      "dependencies": {
+        "cross-fetch": "^3.1.5"
+      },
+      "funding": {
+        "url": "http://github.com/sponsors/cyberalien"
+      }
+    },
+    "node_modules/@purge-icons/core/node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dev": true,
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
+    "node_modules/@purge-icons/generated": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@purge-icons/generated/-/generated-0.9.0.tgz",
+      "integrity": "sha512-s2t+1oVtGDV6KtqfCXtUOhxfeYvOdDF90IVm+nMs/6bUP0HeGZLslguuL/AibpwtfL4FA/oCsIu/RhwapgAdJw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/iconify": ">=2.0.0-rc.6"
+      }
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-4.0.2.tgz",
@@ -5755,6 +5808,35 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
+    "node_modules/cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "dev": true,
+      "dependencies": {
+        "node-fetch": "2.6.7"
+      }
+    },
+    "node_modules/cross-fetch/node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -14167,6 +14249,19 @@
         "rollup-plugin-inject": "^3.0.0"
       }
     },
+    "node_modules/rollup-plugin-purge-icons": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-purge-icons/-/rollup-plugin-purge-icons-0.9.1.tgz",
+      "integrity": "sha512-hRDKBsPUz47UMdBufki2feTmBF2ClEJlYqL7N6vpVAHSLd7V2BJUaNKOF7YYbLMofVVF+9hm44YSkYO6k9hUgg==",
+      "dev": true,
+      "dependencies": {
+        "@purge-icons/core": "^0.9.1",
+        "@purge-icons/generated": "^0.9.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/rollup-plugin-terser": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
@@ -16673,6 +16768,23 @@
         "monaco-editor": ">=0.33.0"
       }
     },
+    "node_modules/vite-plugin-purge-icons": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-purge-icons/-/vite-plugin-purge-icons-0.9.1.tgz",
+      "integrity": "sha512-oS0Y9Iq6vGnTDVRzB8xJNhA/gGlyR0lfCICU6+9FRKdrO5PnT34fRjvd8YWEsegCrk91+w3GVZc0HJDj/dPp5Q==",
+      "dev": true,
+      "dependencies": {
+        "@purge-icons/core": "^0.9.1",
+        "@purge-icons/generated": "^0.9.0",
+        "rollup-plugin-purge-icons": "^0.9.1"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "vite": "^2.0.0-beta.3 || ^3.0.0"
+      }
+    },
     "node_modules/vite-plugin-windicss": {
       "version": "1.8.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.7.tgz",
@@ -18461,6 +18573,11 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify/iconify": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
+      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ=="
+    },
     "@iconify/types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.1.0.tgz",
@@ -19424,6 +19541,48 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@purge-icons/core": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@purge-icons/core/-/core-0.9.1.tgz",
+      "integrity": "sha512-sx8/a30MbbqQVEqhuMPE1wJpdVRRbEmwEPZpFzVkcDixzX4p+R2A0WVxqkb0xfHUBAVQwrSE2SeAyniIQLqbLw==",
+      "dev": true,
+      "requires": {
+        "@iconify/iconify": "2.1.2",
+        "axios": "^0.26.0",
+        "debug": "^4.3.3",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^10.0.1"
+      },
+      "dependencies": {
+        "@iconify/iconify": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.1.2.tgz",
+          "integrity": "sha512-QcUzFeEWkE/mW+BVtEGmcWATClcCOIJFiYUD/PiCWuTcdEA297o8D4oN6Ra44WrNOHu1wqNW4J0ioaDIiqaFOQ==",
+          "dev": true,
+          "requires": {
+            "cross-fetch": "^3.1.5"
+          }
+        },
+        "axios": {
+          "version": "0.26.1",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+          "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+          "dev": true,
+          "requires": {
+            "follow-redirects": "^1.14.8"
+          }
+        }
+      }
+    },
+    "@purge-icons/generated": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@purge-icons/generated/-/generated-0.9.0.tgz",
+      "integrity": "sha512-s2t+1oVtGDV6KtqfCXtUOhxfeYvOdDF90IVm+nMs/6bUP0HeGZLslguuL/AibpwtfL4FA/oCsIu/RhwapgAdJw==",
+      "dev": true,
+      "requires": {
+        "@iconify/iconify": ">=2.0.0-rc.6"
+      }
+    },
     "@rollup/plugin-alias": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-4.0.2.tgz",
@@ -21733,6 +21892,26 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
+    "cross-fetch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+      "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+      "dev": true,
+      "requires": {
+        "node-fetch": "2.6.7"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+          "dev": true,
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        }
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -27878,6 +28057,16 @@
         "rollup-plugin-inject": "^3.0.0"
       }
     },
+    "rollup-plugin-purge-icons": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-purge-icons/-/rollup-plugin-purge-icons-0.9.1.tgz",
+      "integrity": "sha512-hRDKBsPUz47UMdBufki2feTmBF2ClEJlYqL7N6vpVAHSLd7V2BJUaNKOF7YYbLMofVVF+9hm44YSkYO6k9hUgg==",
+      "dev": true,
+      "requires": {
+        "@purge-icons/core": "^0.9.1",
+        "@purge-icons/generated": "^0.9.0"
+      }
+    },
     "rollup-plugin-terser": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
@@ -29624,6 +29813,17 @@
       "dev": true,
       "requires": {}
     },
+    "vite-plugin-purge-icons": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-purge-icons/-/vite-plugin-purge-icons-0.9.1.tgz",
+      "integrity": "sha512-oS0Y9Iq6vGnTDVRzB8xJNhA/gGlyR0lfCICU6+9FRKdrO5PnT34fRjvd8YWEsegCrk91+w3GVZc0HJDj/dPp5Q==",
+      "dev": true,
+      "requires": {
+        "@purge-icons/core": "^0.9.1",
+        "@purge-icons/generated": "^0.9.0",
+        "rollup-plugin-purge-icons": "^0.9.1"
+      }
+    },
     "vite-plugin-windicss": {
       "version": "1.8.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.8.7.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 5046a80816..6f3ff2f551 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
+    "@iconify/iconify": "^2.2.1",
     "@vue-flow/additional-components": "^1.2.0",
     "@vue-flow/core": "^1.3.0",
     "@vuelidate/core": "^2.0.0-alpha.44",
@@ -109,6 +110,7 @@
     "unplugin-icons": "^0.14.7",
     "unplugin-vue-components": "^0.22.4",
     "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-purge-icons": "^0.9.0",
     "vitest": "^0.18.0",
     "windicss": "^3.5.6"
   }

From 85e03f730cd5b4ef8ad5eefd4b7659c3a9568344 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 7 Dec 2022 11:35:57 +0530
Subject: [PATCH 02/41] feat(gui): add icon toggle option in tree view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |    1 +
 .../nc-gui/components/dashboard/TreeView.vue  |   37 +
 .../nc-gui/components/general/EmojiIcons.vue  | 1857 +++++++++++++++++
 3 files changed, 1895 insertions(+)
 create mode 100644 packages/nc-gui/components/general/EmojiIcons.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index bb95e0722e..79b48c1824 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -50,6 +50,7 @@ declare module '@vue/runtime-core' {
     AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default']
     AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default']
     APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index f21928d9a9..183053612b 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -299,6 +299,19 @@ watch(
   },
   { immediate: true },
 )
+
+
+const setIcon = (icon: string, table: TableType) => {
+  table.meta = {
+    // ...table.meta || {},
+    icon,
+  }
+  $api.dbTable.update(table.id as string, {
+    meta: {
+      icon,
+    },
+  })
+}
 </script>
 
 <template>
@@ -550,6 +563,30 @@ watch(
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+
+                          <a-popover trigger="hover" @click.stop>
+                            <div @click.stop>
+                              <MdiDrag
+                                v-if="isUIAllowed('treeview-drag-n-drop')"
+                                :class="`nc-child-draggable-icon-${table.title}`"
+                                class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                                @click.stop.prevent
+                              />
+
+                              <span v-if="table.meta?.icon" class="iconify cursor-pointer" :data-icon="table.meta?.icon"></span>
+
+                              <component
+                                v-else
+                                :is="icon(table)"
+                                class="nc-view-icon text-xs"
+                                :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                              />
+                            </div>
+                            <template #content>
+                              <LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" />
+                            </template>
+                          </a-popover>
+
                           <MdiDragVertical
                             v-if="isUIAllowed('treeview-drag-n-drop')"
                             :class="`nc-child-draggable-icon-${table.title}`"
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
new file mode 100644
index 0000000000..b62a23bb27
--- /dev/null
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -0,0 +1,1857 @@
+<script lang="ts" setup>
+const emit = defineEmits(['selectIcon'])
+const search = $ref('')
+
+// todo: move to utils
+const icons = [
+  '1st-place-medal',
+  '2nd-place-medal',
+  '3rd-place-medal',
+  'a-button',
+  'ab-button',
+  'admission-tickets',
+  'aerial-tramway',
+  'airplane',
+  'airplane-arrival',
+  'airplane-departure',
+  'alarm-clock',
+  'alembic',
+  'alien',
+  'alien-monster',
+  'ambulance',
+  'american-football',
+  'amphora',
+  'anchor',
+  'anger-symbol',
+  'angry-face',
+  'angry-face-with-horns',
+  'anguished-face',
+  'ant',
+  'antenna-bars',
+  'anxious-face-with-sweat',
+  'aquarius',
+  'aries',
+  'articulated-lorry',
+  'artist-palette',
+  'asterisk',
+  'astonished-face',
+  'atm-sign',
+  'atom-symbol',
+  'automobile',
+  'avocado',
+  'b-button',
+  'baby',
+  'baby-angel',
+  'baby-angel-dark-skin-tone',
+  'baby-angel-light-skin-tone',
+  'baby-angel-medium-dark-skin-tone',
+  'baby-angel-medium-light-skin-tone',
+  'baby-angel-medium-skin-tone',
+  'baby-bottle',
+  'baby-chick',
+  'baby-dark-skin-tone',
+  'baby-light-skin-tone',
+  'baby-medium-dark-skin-tone',
+  'baby-medium-light-skin-tone',
+  'baby-medium-skin-tone',
+  'baby-symbol',
+  'back-arrow',
+  'backhand-index-pointing-down',
+  'backhand-index-pointing-down-dark-skin-tone',
+  'backhand-index-pointing-down-light-skin-tone',
+  'backhand-index-pointing-down-medium-dark-skin-tone',
+  'backhand-index-pointing-down-medium-light-skin-tone',
+  'backhand-index-pointing-down-medium-skin-tone',
+  'backhand-index-pointing-left',
+  'backhand-index-pointing-left-dark-skin-tone',
+  'backhand-index-pointing-left-light-skin-tone',
+  'backhand-index-pointing-left-medium-dark-skin-tone',
+  'backhand-index-pointing-left-medium-light-skin-tone',
+  'backhand-index-pointing-left-medium-skin-tone',
+  'backhand-index-pointing-right',
+  'backhand-index-pointing-right-dark-skin-tone',
+  'backhand-index-pointing-right-light-skin-tone',
+  'backhand-index-pointing-right-medium-dark-skin-tone',
+  'backhand-index-pointing-right-medium-light-skin-tone',
+  'backhand-index-pointing-right-medium-skin-tone',
+  'backhand-index-pointing-up',
+  'backhand-index-pointing-up-dark-skin-tone',
+  'backhand-index-pointing-up-light-skin-tone',
+  'backhand-index-pointing-up-medium-dark-skin-tone',
+  'backhand-index-pointing-up-medium-light-skin-tone',
+  'backhand-index-pointing-up-medium-skin-tone',
+  'backpack',
+  'bacon',
+  'badminton',
+  'baggage-claim',
+  'baguette-bread',
+  'balance-scale',
+  'balloon',
+  'ballot-box-with-ballot',
+  'ballot-box-with-check',
+  'banana',
+  'bank',
+  'bar-chart',
+  'barber-pole',
+  'baseball',
+  'basketball',
+  'bat',
+  'bathtub',
+  'battery',
+  'beach-with-umbrella',
+  'beaming-face-with-smiling-eyes',
+  'bear-face',
+  'beating-heart',
+  'bed',
+  'beer-mug',
+  'bell',
+  'bell-with-slash',
+  'bellhop-bell',
+  'bento-box',
+  'bicycle',
+  'bikini',
+  'biohazard',
+  'bird',
+  'birthday-cake',
+  'black-circle',
+  'black-heart',
+  'black-large-square',
+  'black-medium-small-square',
+  'black-medium-square',
+  'black-nib',
+  'black-small-square',
+  'black-square-button',
+  'blond-haired-person',
+  'blond-haired-person-dark-skin-tone',
+  'blond-haired-person-light-skin-tone',
+  'blond-haired-person-medium-dark-skin-tone',
+  'blond-haired-person-medium-light-skin-tone',
+  'blond-haired-person-medium-skin-tone',
+  'blossom',
+  'blowfish',
+  'blue-book',
+  'blue-circle',
+  'blue-heart',
+  'boar',
+  'bomb',
+  'bookmark',
+  'bookmark-tabs',
+  'books',
+  'bottle-with-popping-cork',
+  'bouquet',
+  'bow-and-arrow',
+  'bowling',
+  'boxing-glove',
+  'boy',
+  'boy-dark-skin-tone',
+  'boy-light-skin-tone',
+  'boy-medium-dark-skin-tone',
+  'boy-medium-light-skin-tone',
+  'boy-medium-skin-tone',
+  'bread',
+  'bride-with-veil',
+  'bride-with-veil-dark-skin-tone',
+  'bride-with-veil-light-skin-tone',
+  'bride-with-veil-medium-dark-skin-tone',
+  'bride-with-veil-medium-light-skin-tone',
+  'bride-with-veil-medium-skin-tone',
+  'bridge-at-night',
+  'briefcase',
+  'bright-button',
+  'broken-heart',
+  'bug',
+  'building-construction',
+  'bullet-train',
+  'burrito',
+  'bus',
+  'bus-stop',
+  'bust-in-silhouette',
+  'busts-in-silhouette',
+  'butterfly',
+  'cactus',
+  'calendar',
+  'call-me-hand',
+  'call-me-hand-dark-skin-tone',
+  'call-me-hand-light-skin-tone',
+  'call-me-hand-medium-dark-skin-tone',
+  'call-me-hand-medium-light-skin-tone',
+  'call-me-hand-medium-skin-tone',
+  'camel',
+  'camera',
+  'camera-with-flash',
+  'camping',
+  'cancer',
+  'candle',
+  'candy',
+  'canoe',
+  'capricorn',
+  'card-file-box',
+  'card-index',
+  'card-index-dividers',
+  'carousel-horse',
+  'carp-streamer',
+  'carrot',
+  'castle',
+  'cat',
+  'cat-face',
+  'cat-face-with-tears-of-joy',
+  'cat-face-with-wry-smile',
+  'chains',
+  'chart-decreasing',
+  'chart-increasing',
+  'chart-increasing-with-yen',
+  'cheese-wedge',
+  'cherries',
+  'cherry-blossom',
+  'chestnut',
+  'chicken',
+  'children-crossing',
+  'chipmunk',
+  'chocolate-bar',
+  'christmas-tree',
+  'church',
+  'cigarette',
+  'cinema',
+  'circled-m',
+  'circus-tent',
+  'cityscape',
+  'cityscape-at-dusk',
+  'cl-button',
+  'clamp',
+  'clapper-board',
+  'clapping-hands',
+  'clapping-hands-dark-skin-tone',
+  'clapping-hands-light-skin-tone',
+  'clapping-hands-medium-dark-skin-tone',
+  'clapping-hands-medium-light-skin-tone',
+  'clapping-hands-medium-skin-tone',
+  'classical-building',
+  'clinking-beer-mugs',
+  'clinking-glasses',
+  'clipboard',
+  'clockwise-vertical-arrows',
+  'closed-book',
+  'closed-mailbox-with-lowered-flag',
+  'closed-mailbox-with-raised-flag',
+  'closed-umbrella',
+  'cloud',
+  'cloud-with-lightning',
+  'cloud-with-lightning-and-rain',
+  'cloud-with-rain',
+  'cloud-with-snow',
+  'clown-face',
+  'club-suit',
+  'clutch-bag',
+  'cocktail-glass',
+  'coffin',
+  'collision',
+  'comet',
+  'computer-disk',
+  'computer-mouse',
+  'confetti-ball',
+  'confounded-face',
+  'confused-face',
+  'construction',
+  'construction-worker',
+  'construction-worker-dark-skin-tone',
+  'construction-worker-light-skin-tone',
+  'construction-worker-medium-dark-skin-tone',
+  'construction-worker-medium-light-skin-tone',
+  'construction-worker-medium-skin-tone',
+  'control-knobs',
+  'convenience-store',
+  'cooked-rice',
+  'cookie',
+  'cooking',
+  'cool-button',
+  'copyright',
+  'couch-and-lamp',
+  'counterclockwise-arrows-button',
+  'couple-with-heart',
+  'couple-with-heart-man-man',
+  'couple-with-heart-woman-woman',
+  'cow',
+  'cow-face',
+  'cowboy-hat-face',
+  'crab',
+  'crayon',
+  'credit-card',
+  'crescent-moon',
+  'cricket-game',
+  'crocodile',
+  'croissant',
+  'cross-mark',
+  'cross-mark-button',
+  'crossed-fingers',
+  'crossed-fingers-dark-skin-tone',
+  'crossed-fingers-light-skin-tone',
+  'crossed-fingers-medium-dark-skin-tone',
+  'crossed-fingers-medium-light-skin-tone',
+  'crossed-fingers-medium-skin-tone',
+  'crossed-swords',
+  'crown',
+  'crying-cat-face',
+  'crying-face',
+  'crystal-ball',
+  'cucumber',
+  'curly-loop',
+  'currency-exchange',
+  'curry-rice',
+  'custard',
+  'customs',
+  'cyclone',
+  'dagger',
+  'dango',
+  'dark-skin-tone',
+  'dashing-away',
+  'deciduous-tree',
+  'deer',
+  'delivery-truck',
+  'department-store',
+  'derelict-house',
+  'desert',
+  'desert-island',
+  'desktop-computer',
+  'detective',
+  'detective-dark-skin-tone',
+  'detective-light-skin-tone',
+  'detective-medium-dark-skin-tone',
+  'detective-medium-light-skin-tone',
+  'detective-medium-skin-tone',
+  'diamond-suit',
+  'diamond-with-a-dot',
+  'digit-eight',
+  'digit-five',
+  'digit-four',
+  'digit-nine',
+  'digit-one',
+  'digit-seven',
+  'digit-six',
+  'digit-three',
+  'digit-two',
+  'digit-zero',
+  'dim-button',
+  'direct-hit',
+  'disappointed-face',
+  'dizzy',
+  'dizzy-face',
+  'dog',
+  'dog-face',
+  'dollar-banknote',
+  'dolphin',
+  'door',
+  'dotted-six-pointed-star',
+  'double-curly-loop',
+  'double-exclamation-mark',
+  'doughnut',
+  'dove',
+  'down-arrow',
+  'down-left-arrow',
+  'down-right-arrow',
+  'downcast-face-with-sweat',
+  'downwards-button',
+  'dragon',
+  'dragon-face',
+  'dress',
+  'drooling-face',
+  'droplet',
+  'drum',
+  'duck',
+  'dvd',
+  'e-mail',
+  'eagle',
+  'ear',
+  'ear-dark-skin-tone',
+  'ear-light-skin-tone',
+  'ear-medium-dark-skin-tone',
+  'ear-medium-light-skin-tone',
+  'ear-medium-skin-tone',
+  'ear-of-corn',
+  'egg',
+  'eggplant',
+  'eight-oclock',
+  'eight-pointed-star',
+  'eight-spoked-asterisk',
+  'eight-thirty',
+  'eject-button',
+  'electric-plug',
+  'elephant',
+  'eleven-oclock',
+  'eleven-thirty',
+  'end-arrow',
+  'envelope',
+  'envelope-with-arrow',
+  'euro-banknote',
+  'evergreen-tree',
+  'ewe',
+  'exclamation-mark',
+  'exclamation-question-mark',
+  'expressionless-face',
+  'eye',
+  'eye-in-speech-bubble',
+  'eyes',
+  'face-blowing-a-kiss',
+  'face-savoring-food',
+  'face-screaming-in-fear',
+  'face-with-head-bandage',
+  'face-with-medical-mask',
+  'face-with-open-mouth',
+  'face-with-rolling-eyes',
+  'face-with-steam-from-nose',
+  'face-with-tears-of-joy',
+  'face-with-thermometer',
+  'face-with-tongue',
+  'face-without-mouth',
+  'factory',
+  'fallen-leaf',
+  'family',
+  'family-man-man-boy',
+  'family-man-man-boy-boy',
+  'family-man-man-girl',
+  'family-man-man-girl-boy',
+  'family-man-man-girl-girl',
+  'family-man-woman-boy-boy',
+  'family-man-woman-girl',
+  'family-man-woman-girl-boy',
+  'family-man-woman-girl-girl',
+  'family-woman-woman-boy',
+  'family-woman-woman-boy-boy',
+  'family-woman-woman-girl',
+  'family-woman-woman-girl-boy',
+  'family-woman-woman-girl-girl',
+  'fast-down-button',
+  'fast-forward-button',
+  'fast-reverse-button',
+  'fast-up-button',
+  'fax-machine',
+  'fearful-face',
+  'ferris-wheel',
+  'ferry',
+  'field-hockey',
+  'file-cabinet',
+  'file-folder',
+  'film-frames',
+  'film-projector',
+  'fire',
+  'fire-engine',
+  'fireworks',
+  'first-quarter-moon',
+  'first-quarter-moon-face',
+  'fish',
+  'fish-cake-with-swirl',
+  'fishing-pole',
+  'five-oclock',
+  'five-thirty',
+  'flag-england',
+  'flag-for-afghanistan',
+  'flag-for-aland-islands',
+  'flag-for-albania',
+  'flag-for-algeria',
+  'flag-for-american-samoa',
+  'flag-for-andorra',
+  'flag-for-angola',
+  'flag-for-anguilla',
+  'flag-for-antarctica',
+  'flag-for-antigua-and-barbuda',
+  'flag-for-argentina',
+  'flag-for-armenia',
+  'flag-for-aruba',
+  'flag-for-ascension-island',
+  'flag-for-australia',
+  'flag-for-austria',
+  'flag-for-azerbaijan',
+  'flag-for-bahamas',
+  'flag-for-bahrain',
+  'flag-for-bangladesh',
+  'flag-for-barbados',
+  'flag-for-belarus',
+  'flag-for-belgium',
+  'flag-for-belize',
+  'flag-for-benin',
+  'flag-for-bermuda',
+  'flag-for-bhutan',
+  'flag-for-black-flag',
+  'flag-for-bolivia',
+  'flag-for-bosnia-and-herzegovina',
+  'flag-for-botswana',
+  'flag-for-bouvet-island',
+  'flag-for-brazil',
+  'flag-for-british-indian-ocean-territory',
+  'flag-for-british-virgin-islands',
+  'flag-for-brunei',
+  'flag-for-bulgaria',
+  'flag-for-burkina-faso',
+  'flag-for-burundi',
+  'flag-for-cambodia',
+  'flag-for-cameroon',
+  'flag-for-canada',
+  'flag-for-canary-islands',
+  'flag-for-cape-verde',
+  'flag-for-caribbean-netherlands',
+  'flag-for-cayman-islands',
+  'flag-for-central-african-republic',
+  'flag-for-ceuta-and-melilla',
+  'flag-for-chad',
+  'flag-for-chequered-flag',
+  'flag-for-chile',
+  'flag-for-china',
+  'flag-for-christmas-island',
+  'flag-for-clipperton-island',
+  'flag-for-cocos-islands',
+  'flag-for-colombia',
+  'flag-for-comoros',
+  'flag-for-congo-brazzaville',
+  'flag-for-congo-kinshasa',
+  'flag-for-cook-islands',
+  'flag-for-costa-rica',
+  'flag-for-cote-divoire',
+  'flag-for-croatia',
+  'flag-for-crossed-flags',
+  'flag-for-cuba',
+  'flag-for-curacao',
+  'flag-for-cyprus',
+  'flag-for-czechia',
+  'flag-for-denmark',
+  'flag-for-diego-garcia',
+  'flag-for-djibouti',
+  'flag-for-dominica',
+  'flag-for-dominican-republic',
+  'flag-for-ecuador',
+  'flag-for-egypt',
+  'flag-for-el-salvador',
+  'flag-for-equatorial-guinea',
+  'flag-for-eritrea',
+  'flag-for-estonia',
+  'flag-for-ethiopia',
+  'flag-for-european-union',
+  'flag-for-falkland-islands',
+  'flag-for-faroe-islands',
+  'flag-for-fiji',
+  'flag-for-finland',
+  'flag-for-france',
+  'flag-for-french-guiana',
+  'flag-for-french-polynesia',
+  'flag-for-french-southern-territories',
+  'flag-for-gabon',
+  'flag-for-gambia',
+  'flag-for-georgia',
+  'flag-for-germany',
+  'flag-for-ghana',
+  'flag-for-gibraltar',
+  'flag-for-greece',
+  'flag-for-greenland',
+  'flag-for-grenada',
+  'flag-for-guadeloupe',
+  'flag-for-guam',
+  'flag-for-guatemala',
+  'flag-for-guernsey',
+  'flag-for-guinea',
+  'flag-for-guinea-bissau',
+  'flag-for-guyana',
+  'flag-for-haiti',
+  'flag-for-heard-and-mcdonald-islands',
+  'flag-for-honduras',
+  'flag-for-hong-kong-sar-china',
+  'flag-for-hungary',
+  'flag-for-iceland',
+  'flag-for-india',
+  'flag-for-indonesia',
+  'flag-for-iran',
+  'flag-for-iraq',
+  'flag-for-ireland',
+  'flag-for-isle-of-man',
+  'flag-for-israel',
+  'flag-for-italy',
+  'flag-for-jamaica',
+  'flag-for-japan',
+  'flag-for-jersey',
+  'flag-for-jordan',
+  'flag-for-kazakhstan',
+  'flag-for-kenya',
+  'flag-for-kiribati',
+  'flag-for-kosovo',
+  'flag-for-kuwait',
+  'flag-for-kyrgyzstan',
+  'flag-for-laos',
+  'flag-for-latvia',
+  'flag-for-lebanon',
+  'flag-for-lesotho',
+  'flag-for-liberia',
+  'flag-for-libya',
+  'flag-for-liechtenstein',
+  'flag-for-lithuania',
+  'flag-for-luxembourg',
+  'flag-for-macau-sar-china',
+  'flag-for-macedonia',
+  'flag-for-madagascar',
+  'flag-for-malawi',
+  'flag-for-malaysia',
+  'flag-for-maldives',
+  'flag-for-mali',
+  'flag-for-malta',
+  'flag-for-marshall-islands',
+  'flag-for-martinique',
+  'flag-for-mauritania',
+  'flag-for-mauritius',
+  'flag-for-mayotte',
+  'flag-for-mexico',
+  'flag-for-micronesia',
+  'flag-for-moldova',
+  'flag-for-monaco',
+  'flag-for-mongolia',
+  'flag-for-montenegro',
+  'flag-for-montserrat',
+  'flag-for-morocco',
+  'flag-for-mozambique',
+  'flag-for-myanmar',
+  'flag-for-namibia',
+  'flag-for-nauru',
+  'flag-for-nepal',
+  'flag-for-netherlands',
+  'flag-for-new-caledonia',
+  'flag-for-new-zealand',
+  'flag-for-nicaragua',
+  'flag-for-niger',
+  'flag-for-nigeria',
+  'flag-for-niue',
+  'flag-for-norfolk-island',
+  'flag-for-north-korea',
+  'flag-for-northern-mariana-islands',
+  'flag-for-norway',
+  'flag-for-oman',
+  'flag-for-pakistan',
+  'flag-for-palau',
+  'flag-for-palestinian-territories',
+  'flag-for-panama',
+  'flag-for-papua-new-guinea',
+  'flag-for-paraguay',
+  'flag-for-peru',
+  'flag-for-philippines',
+  'flag-for-pitcairn-islands',
+  'flag-for-poland',
+  'flag-for-portugal',
+  'flag-for-puerto-rico',
+  'flag-for-qatar',
+  'flag-for-rainbow-flag',
+  'flag-for-reunion',
+  'flag-for-romania',
+  'flag-for-russia',
+  'flag-for-rwanda',
+  'flag-for-samoa',
+  'flag-for-san-marino',
+  'flag-for-sao-tome-and-principe',
+  'flag-for-saudi-arabia',
+  'flag-for-senegal',
+  'flag-for-serbia',
+  'flag-for-seychelles',
+  'flag-for-sierra-leone',
+  'flag-for-singapore',
+  'flag-for-sint-maarten',
+  'flag-for-slovakia',
+  'flag-for-slovenia',
+  'flag-for-solomon-islands',
+  'flag-for-somalia',
+  'flag-for-south-africa',
+  'flag-for-south-georgia-and-south-sandwich-islands',
+  'flag-for-south-korea',
+  'flag-for-south-sudan',
+  'flag-for-spain',
+  'flag-for-sri-lanka',
+  'flag-for-st-barthelemy',
+  'flag-for-st-helena',
+  'flag-for-st-kitts-and-nevis',
+  'flag-for-st-lucia',
+  'flag-for-st-martin',
+  'flag-for-st-pierre-and-miquelon',
+  'flag-for-st-vincent-and-grenadines',
+  'flag-for-sudan',
+  'flag-for-suriname',
+  'flag-for-svalbard-and-jan-mayen',
+  'flag-for-swaziland',
+  'flag-for-sweden',
+  'flag-for-switzerland',
+  'flag-for-syria',
+  'flag-for-taiwan',
+  'flag-for-tajikistan',
+  'flag-for-tanzania',
+  'flag-for-thailand',
+  'flag-for-timor-leste',
+  'flag-for-togo',
+  'flag-for-tokelau',
+  'flag-for-tonga',
+  'flag-for-triangular-flag',
+  'flag-for-trinidad-and-tobago',
+  'flag-for-tristan-da-cunha',
+  'flag-for-tunisia',
+  'flag-for-turkey',
+  'flag-for-turkmenistan',
+  'flag-for-turks-and-caicos-islands',
+  'flag-for-tuvalu',
+  'flag-for-uganda',
+  'flag-for-ukraine',
+  'flag-for-united-arab-emirates',
+  'flag-for-united-kingdom',
+  'flag-for-united-states',
+  'flag-for-uruguay',
+  'flag-for-us-outlying-islands',
+  'flag-for-us-virgin-islands',
+  'flag-for-uzbekistan',
+  'flag-for-vanuatu',
+  'flag-for-vatican-city',
+  'flag-for-venezuela',
+  'flag-for-vietnam',
+  'flag-for-wallis-and-futuna',
+  'flag-for-western-sahara',
+  'flag-for-white-flag',
+  'flag-for-yemen',
+  'flag-for-zambia',
+  'flag-for-zimbabwe',
+  'flag-in-hole',
+  'flag-scotland',
+  'flashlight',
+  'fleur-de-lis',
+  'flexed-biceps',
+  'flexed-biceps-dark-skin-tone',
+  'flexed-biceps-light-skin-tone',
+  'flexed-biceps-medium-dark-skin-tone',
+  'flexed-biceps-medium-light-skin-tone',
+  'flexed-biceps-medium-skin-tone',
+  'floppy-disk',
+  'flower-playing-cards',
+  'flushed-face',
+  'fog',
+  'foggy',
+  'folded-hands',
+  'folded-hands-dark-skin-tone',
+  'folded-hands-light-skin-tone',
+  'folded-hands-medium-dark-skin-tone',
+  'folded-hands-medium-light-skin-tone',
+  'folded-hands-medium-skin-tone',
+  'footprints',
+  'fork-and-knife',
+  'fork-and-knife-with-plate',
+  'fountain',
+  'fountain-pen',
+  'four-leaf-clover',
+  'four-oclock',
+  'four-thirty',
+  'fox',
+  'framed-picture',
+  'free-button',
+  'french-fries',
+  'fried-shrimp',
+  'frog-face',
+  'front-facing-baby-chick',
+  'frowning-face',
+  'frowning-face-with-open-mouth',
+  'fuel-pump',
+  'full-moon',
+  'full-moon-face',
+  'funeral-urn',
+  'game-die',
+  'gear',
+  'gem-stone',
+  'gemini',
+  'ghost',
+  'girl',
+  'girl-dark-skin-tone',
+  'girl-light-skin-tone',
+  'girl-medium-dark-skin-tone',
+  'girl-medium-light-skin-tone',
+  'girl-medium-skin-tone',
+  'glass-of-milk',
+  'glasses',
+  'globe-showing-americas',
+  'globe-showing-asia-australia',
+  'globe-showing-europe-africa',
+  'globe-with-meridians',
+  'glowing-star',
+  'goal-net',
+  'goat',
+  'goblin',
+  'gorilla',
+  'graduation-cap',
+  'grapes',
+  'green-apple',
+  'green-book',
+  'green-heart',
+  'green-salad',
+  'grimacing-face',
+  'grinning-cat-face',
+  'grinning-cat-face-with-smiling-eyes',
+  'grinning-face',
+  'grinning-face-with-big-eyes',
+  'grinning-face-with-smiling-eyes',
+  'grinning-face-with-sweat',
+  'grinning-squinting-face',
+  'growing-heart',
+  'guard',
+  'guard-dark-skin-tone',
+  'guard-light-skin-tone',
+  'guard-medium-dark-skin-tone',
+  'guard-medium-light-skin-tone',
+  'guard-medium-skin-tone',
+  'guitar',
+  'hamburger',
+  'hammer',
+  'hammer-and-pick',
+  'hammer-and-wrench',
+  'hamster-face',
+  'hand-with-fingers-splayed',
+  'hand-with-fingers-splayed-dark-skin-tone',
+  'hand-with-fingers-splayed-light-skin-tone',
+  'hand-with-fingers-splayed-medium-dark-skin-tone',
+  'hand-with-fingers-splayed-medium-light-skin-tone',
+  'hand-with-fingers-splayed-medium-skin-tone',
+  'handbag',
+  'handshake',
+  'handshake-dark-skin-tone',
+  'handshake-light-skin-tone',
+  'handshake-medium-dark-skin-tone',
+  'handshake-medium-light-skin-tone',
+  'handshake-medium-skin-tone',
+  'hatching-chick',
+  'headphone',
+  'hear-no-evil-monkey',
+  'heart-decoration',
+  'heart-suit',
+  'heart-with-arrow',
+  'heart-with-ribbon',
+  'heavy-check-mark',
+  'heavy-division-sign',
+  'heavy-dollar-sign',
+  'heavy-heart-exclamation',
+  'heavy-large-circle',
+  'heavy-minus-sign',
+  'heavy-multiplication-x',
+  'heavy-plus-sign',
+  'helicopter',
+  'herb',
+  'hibiscus',
+  'high-heeled-shoe',
+  'high-speed-train',
+  'high-voltage',
+  'hole',
+  'honey-pot',
+  'honeybee',
+  'horizontal-traffic-light',
+  'horse',
+  'horse-face',
+  'horse-racing',
+  'horse-racing-dark-skin-tone',
+  'horse-racing-light-skin-tone',
+  'horse-racing-medium-dark-skin-tone',
+  'horse-racing-medium-light-skin-tone',
+  'horse-racing-medium-skin-tone',
+  'hospital',
+  'hot-beverage',
+  'hot-dog',
+  'hot-pepper',
+  'hot-springs',
+  'hotel',
+  'hourglass-done',
+  'hourglass-not-done',
+  'house',
+  'house-with-garden',
+  'houses',
+  'hugging-face',
+  'hundred-points',
+  'hushed-face',
+  'ice-cream',
+  'ice-hockey',
+  'ice-skate',
+  'id-button',
+  'inbox-tray',
+  'incoming-envelope',
+  'index-pointing-up',
+  'index-pointing-up-dark-skin-tone',
+  'index-pointing-up-light-skin-tone',
+  'index-pointing-up-medium-dark-skin-tone',
+  'index-pointing-up-medium-light-skin-tone',
+  'index-pointing-up-medium-skin-tone',
+  'information',
+  'input-latin-letters',
+  'input-latin-lowercase',
+  'input-latin-uppercase',
+  'input-numbers',
+  'input-symbols',
+  'jack-o-lantern',
+  'japanese-acceptable-button',
+  'japanese-application-button',
+  'japanese-bargain-button',
+  'japanese-castle',
+  'japanese-congratulations-button',
+  'japanese-discount-button',
+  'japanese-dolls',
+  'japanese-free-of-charge-button',
+  'japanese-here-button',
+  'japanese-monthly-amount-button',
+  'japanese-no-vacancy-button',
+  'japanese-not-free-of-charge-button',
+  'japanese-open-for-business-button',
+  'japanese-passing-grade-button',
+  'japanese-post-office',
+  'japanese-prohibited-button',
+  'japanese-reserved-button',
+  'japanese-secret-button',
+  'japanese-service-charge-button',
+  'japanese-symbol-for-beginner',
+  'japanese-vacancy-button',
+  'jeans',
+  'joker',
+  'joystick',
+  'kaaba',
+  'key',
+  'keyboard',
+  'keycap-0',
+  'keycap-1',
+  'keycap-10',
+  'keycap-2',
+  'keycap-3',
+  'keycap-4',
+  'keycap-5',
+  'keycap-6',
+  'keycap-7',
+  'keycap-8',
+  'keycap-9',
+  'keycap-asterisk',
+  'keycap-pound',
+  'kick-scooter',
+  'kimono',
+  'kiss',
+  'kiss-man-man',
+  'kiss-mark',
+  'kiss-woman-woman',
+  'kissing-cat-face',
+  'kissing-face',
+  'kissing-face-with-closed-eyes',
+  'kissing-face-with-smiling-eyes',
+  'kitchen-knife',
+  'kiwi-fruit',
+  'koala',
+  'label',
+  'lady-beetle',
+  'laptop-computer',
+  'large-blue-diamond',
+  'large-orange-diamond',
+  'last-quarter-moon',
+  'last-quarter-moon-face',
+  'last-track-button',
+  'latin-cross',
+  'leaf-fluttering-in-wind',
+  'ledger',
+  'left-arrow',
+  'left-arrow-curving-right',
+  'left-facing-fist',
+  'left-facing-fist-dark-skin-tone',
+  'left-facing-fist-light-skin-tone',
+  'left-facing-fist-medium-dark-skin-tone',
+  'left-facing-fist-medium-light-skin-tone',
+  'left-facing-fist-medium-skin-tone',
+  'left-luggage',
+  'left-right-arrow',
+  'left-speech-bubble',
+  'lemon',
+  'leo',
+  'leopard',
+  'letter-a',
+  'letter-b',
+  'letter-c',
+  'letter-d',
+  'letter-e',
+  'letter-f',
+  'letter-g',
+  'letter-h',
+  'letter-i',
+  'letter-j',
+  'letter-k',
+  'letter-l',
+  'letter-m',
+  'letter-n',
+  'letter-o',
+  'letter-p',
+  'letter-q',
+  'letter-r',
+  'letter-s',
+  'letter-t',
+  'letter-u',
+  'letter-v',
+  'letter-w',
+  'letter-x',
+  'letter-y',
+  'letter-z',
+  'level-slider',
+  'libra',
+  'light-bulb',
+  'light-rail',
+  'light-skin-tone',
+  'link',
+  'linked-paperclips',
+  'lion-face',
+  'lipstick',
+  'litter-in-bin-sign',
+  'lizard',
+  'locked',
+  'locked-with-key',
+  'locked-with-pen',
+  'locomotive',
+  'lollipop',
+  'loudly-crying-face',
+  'loudspeaker',
+  'love-hotel',
+  'love-letter',
+  'lying-face',
+  'magnifying-glass-tilted-left',
+  'magnifying-glass-tilted-right',
+  'mahjong-red-dragon',
+  'man',
+  'man-and-woman-holding-hands',
+  'man-dancing',
+  'man-dancing-dark-skin-tone',
+  'man-dancing-light-skin-tone',
+  'man-dancing-medium-dark-skin-tone',
+  'man-dancing-medium-light-skin-tone',
+  'man-dancing-medium-skin-tone',
+  'man-dark-skin-tone',
+  'man-in-suit-levitating',
+  'man-in-tuxedo',
+  'man-in-tuxedo-dark-skin-tone',
+  'man-in-tuxedo-light-skin-tone',
+  'man-in-tuxedo-medium-dark-skin-tone',
+  'man-in-tuxedo-medium-light-skin-tone',
+  'man-in-tuxedo-medium-skin-tone',
+  'man-light-skin-tone',
+  'man-medium-dark-skin-tone',
+  'man-medium-light-skin-tone',
+  'man-medium-skin-tone',
+  'man-with-chinese-cap',
+  'man-with-chinese-cap-dark-skin-tone',
+  'man-with-chinese-cap-light-skin-tone',
+  'man-with-chinese-cap-medium-dark-skin-tone',
+  'man-with-chinese-cap-medium-light-skin-tone',
+  'man-with-chinese-cap-medium-skin-tone',
+  'mans-shoe',
+  'mantelpiece-clock',
+  'map-of-japan',
+  'maple-leaf',
+  'martial-arts-uniform',
+  'meat-on-bone',
+  'medium-dark-skin-tone',
+  'medium-light-skin-tone',
+  'medium-skin-tone',
+  'megaphone',
+  'melon',
+  'memo',
+  'menorah',
+  'mens-room',
+  'metro',
+  'microphone',
+  'microscope',
+  'middle-finger',
+  'middle-finger-dark-skin-tone',
+  'middle-finger-light-skin-tone',
+  'middle-finger-medium-dark-skin-tone',
+  'middle-finger-medium-light-skin-tone',
+  'middle-finger-medium-skin-tone',
+  'military-medal',
+  'milky-way',
+  'minibus',
+  'moai',
+  'mobile-phone',
+  'mobile-phone-off',
+  'mobile-phone-with-arrow',
+  'money-bag',
+  'money-mouth-face',
+  'money-with-wings',
+  'monkey',
+  'monkey-face',
+  'monorail',
+  'moon-viewing-ceremony',
+  'mosque',
+  'motor-boat',
+  'motor-scooter',
+  'motorcycle',
+  'motorway',
+  'mount-fuji',
+  'mountain',
+  'mountain-cableway',
+  'mountain-railway',
+  'mouse',
+  'mouse-face',
+  'mouth',
+  'movie-camera',
+  'mrs-claus',
+  'mrs-claus-dark-skin-tone',
+  'mrs-claus-light-skin-tone',
+  'mrs-claus-medium-dark-skin-tone',
+  'mrs-claus-medium-light-skin-tone',
+  'mrs-claus-medium-skin-tone',
+  'mushroom',
+  'musical-keyboard',
+  'musical-note',
+  'musical-notes',
+  'musical-score',
+  'muted-speaker',
+  'nail-polish',
+  'nail-polish-dark-skin-tone',
+  'nail-polish-light-skin-tone',
+  'nail-polish-medium-dark-skin-tone',
+  'nail-polish-medium-light-skin-tone',
+  'nail-polish-medium-skin-tone',
+  'name-badge',
+  'national-park',
+  'nauseated-face',
+  'necktie',
+  'nerd-face',
+  'neutral-face',
+  'new-button',
+  'new-moon',
+  'new-moon-face',
+  'newspaper',
+  'next-track-button',
+  'ng-button',
+  'night-with-stars',
+  'nine-oclock',
+  'nine-thirty',
+  'no-bicycles',
+  'no-entry',
+  'no-littering',
+  'no-mobile-phones',
+  'no-one-under-eighteen',
+  'no-pedestrians',
+  'no-smoking',
+  'non-potable-water',
+  'nose',
+  'nose-dark-skin-tone',
+  'nose-light-skin-tone',
+  'nose-medium-dark-skin-tone',
+  'nose-medium-light-skin-tone',
+  'nose-medium-skin-tone',
+  'notebook',
+  'notebook-with-decorative-cover',
+  'nut-and-bolt',
+  'o-button',
+  'octopus',
+  'oden',
+  'office-building',
+  'ogre',
+  'oil-drum',
+  'ok-button',
+  'ok-hand',
+  'ok-hand-dark-skin-tone',
+  'ok-hand-light-skin-tone',
+  'ok-hand-medium-dark-skin-tone',
+  'ok-hand-medium-light-skin-tone',
+  'ok-hand-medium-skin-tone',
+  'old-key',
+  'old-man',
+  'old-man-dark-skin-tone',
+  'old-man-light-skin-tone',
+  'old-man-medium-dark-skin-tone',
+  'old-man-medium-light-skin-tone',
+  'old-man-medium-skin-tone',
+  'old-woman',
+  'old-woman-dark-skin-tone',
+  'old-woman-light-skin-tone',
+  'old-woman-medium-dark-skin-tone',
+  'old-woman-medium-light-skin-tone',
+  'old-woman-medium-skin-tone',
+  'om',
+  'on-arrow',
+  'oncoming-automobile',
+  'oncoming-bus',
+  'oncoming-fist',
+  'oncoming-fist-dark-skin-tone',
+  'oncoming-fist-light-skin-tone',
+  'oncoming-fist-medium-dark-skin-tone',
+  'oncoming-fist-medium-light-skin-tone',
+  'oncoming-fist-medium-skin-tone',
+  'oncoming-police-car',
+  'oncoming-taxi',
+  'one-oclock',
+  'one-thirty',
+  'open-book',
+  'open-file-folder',
+  'open-hands',
+  'open-hands-dark-skin-tone',
+  'open-hands-light-skin-tone',
+  'open-hands-medium-dark-skin-tone',
+  'open-hands-medium-light-skin-tone',
+  'open-hands-medium-skin-tone',
+  'open-mailbox-with-lowered-flag',
+  'open-mailbox-with-raised-flag',
+  'ophiuchus',
+  'optical-disk',
+  'orange-book',
+  'orthodox-cross',
+  'outbox-tray',
+  'owl',
+  'ox',
+  'p-button',
+  'package',
+  'page-facing-up',
+  'page-with-curl',
+  'pager',
+  'paintbrush',
+  'palm-tree',
+  'pancakes',
+  'panda-face',
+  'paperclip',
+  'part-alternation-mark',
+  'party-popper',
+  'passenger-ship',
+  'passport-control',
+  'pause-button',
+  'paw-prints',
+  'peace-symbol',
+  'peach',
+  'peanuts',
+  'pear',
+  'pen',
+  'pencil',
+  'penguin',
+  'pensive-face',
+  'people-with-bunny-ears',
+  'people-wrestling',
+  'people-wrestling-dark-skin-tone',
+  'people-wrestling-light-skin-tone',
+  'people-wrestling-medium-dark-skin-tone',
+  'people-wrestling-medium-light-skin-tone',
+  'people-wrestling-medium-skin-tone',
+  'performing-arts',
+  'persevering-face',
+  'person-biking',
+  'person-biking-dark-skin-tone',
+  'person-biking-light-skin-tone',
+  'person-biking-medium-dark-skin-tone',
+  'person-biking-medium-light-skin-tone',
+  'person-biking-medium-skin-tone',
+  'person-bouncing-ball',
+  'person-bouncing-ball-dark-skin-tone',
+  'person-bouncing-ball-light-skin-tone',
+  'person-bouncing-ball-medium-dark-skin-tone',
+  'person-bouncing-ball-medium-light-skin-tone',
+  'person-bouncing-ball-medium-skin-tone',
+  'person-bowing',
+  'person-bowing-dark-skin-tone',
+  'person-bowing-light-skin-tone',
+  'person-bowing-medium-dark-skin-tone',
+  'person-bowing-medium-light-skin-tone',
+  'person-bowing-medium-skin-tone',
+  'person-cartwheeling',
+  'person-cartwheeling-dark-skin-tone',
+  'person-cartwheeling-light-skin-tone',
+  'person-cartwheeling-medium-dark-skin-tone',
+  'person-cartwheeling-medium-light-skin-tone',
+  'person-cartwheeling-medium-skin-tone',
+  'person-facepalming',
+  'person-facepalming-dark-skin-tone',
+  'person-facepalming-light-skin-tone',
+  'person-facepalming-medium-dark-skin-tone',
+  'person-facepalming-medium-light-skin-tone',
+  'person-facepalming-medium-skin-tone',
+  'person-fencing',
+  'person-frowning',
+  'person-frowning-dark-skin-tone',
+  'person-frowning-light-skin-tone',
+  'person-frowning-medium-dark-skin-tone',
+  'person-frowning-medium-light-skin-tone',
+  'person-frowning-medium-skin-tone',
+  'person-gesturing-no',
+  'person-gesturing-no-dark-skin-tone',
+  'person-gesturing-no-light-skin-tone',
+  'person-gesturing-no-medium-dark-skin-tone',
+  'person-gesturing-no-medium-light-skin-tone',
+  'person-gesturing-no-medium-skin-tone',
+  'person-gesturing-ok',
+  'person-gesturing-ok-dark-skin-tone',
+  'person-gesturing-ok-light-skin-tone',
+  'person-gesturing-ok-medium-dark-skin-tone',
+  'person-gesturing-ok-medium-light-skin-tone',
+  'person-gesturing-ok-medium-skin-tone',
+  'person-getting-haircut',
+  'person-getting-haircut-dark-skin-tone',
+  'person-getting-haircut-light-skin-tone',
+  'person-getting-haircut-medium-dark-skin-tone',
+  'person-getting-haircut-medium-light-skin-tone',
+  'person-getting-haircut-medium-skin-tone',
+  'person-getting-massage',
+  'person-getting-massage-dark-skin-tone',
+  'person-getting-massage-light-skin-tone',
+  'person-getting-massage-medium-dark-skin-tone',
+  'person-getting-massage-medium-light-skin-tone',
+  'person-getting-massage-medium-skin-tone',
+  'person-golfing',
+  'person-in-bed',
+  'person-juggling',
+  'person-juggling-dark-skin-tone',
+  'person-juggling-light-skin-tone',
+  'person-juggling-medium-dark-skin-tone',
+  'person-juggling-medium-light-skin-tone',
+  'person-juggling-medium-skin-tone',
+  'person-lifting-weights',
+  'person-lifting-weights-dark-skin-tone',
+  'person-lifting-weights-light-skin-tone',
+  'person-lifting-weights-medium-dark-skin-tone',
+  'person-lifting-weights-medium-light-skin-tone',
+  'person-lifting-weights-medium-skin-tone',
+  'person-mountain-biking',
+  'person-mountain-biking-dark-skin-tone',
+  'person-mountain-biking-light-skin-tone',
+  'person-mountain-biking-medium-dark-skin-tone',
+  'person-mountain-biking-medium-light-skin-tone',
+  'person-mountain-biking-medium-skin-tone',
+  'person-playing-handball',
+  'person-playing-handball-dark-skin-tone',
+  'person-playing-handball-light-skin-tone',
+  'person-playing-handball-medium-dark-skin-tone',
+  'person-playing-handball-medium-light-skin-tone',
+  'person-playing-handball-medium-skin-tone',
+  'person-playing-water-polo',
+  'person-playing-water-polo-dark-skin-tone',
+  'person-playing-water-polo-light-skin-tone',
+  'person-playing-water-polo-medium-dark-skin-tone',
+  'person-playing-water-polo-medium-light-skin-tone',
+  'person-playing-water-polo-medium-skin-tone',
+  'person-pouting',
+  'person-pouting-dark-skin-tone',
+  'person-pouting-light-skin-tone',
+  'person-pouting-medium-dark-skin-tone',
+  'person-pouting-medium-light-skin-tone',
+  'person-pouting-medium-skin-tone',
+  'person-raising-hand',
+  'person-raising-hand-dark-skin-tone',
+  'person-raising-hand-light-skin-tone',
+  'person-raising-hand-medium-dark-skin-tone',
+  'person-raising-hand-medium-light-skin-tone',
+  'person-raising-hand-medium-skin-tone',
+  'person-rowing-boat',
+  'person-rowing-boat-dark-skin-tone',
+  'person-rowing-boat-light-skin-tone',
+  'person-rowing-boat-medium-dark-skin-tone',
+  'person-rowing-boat-medium-light-skin-tone',
+  'person-rowing-boat-medium-skin-tone',
+  'person-running',
+  'person-running-dark-skin-tone',
+  'person-running-light-skin-tone',
+  'person-running-medium-dark-skin-tone',
+  'person-running-medium-light-skin-tone',
+  'person-running-medium-skin-tone',
+  'person-shrugging',
+  'person-shrugging-dark-skin-tone',
+  'person-shrugging-light-skin-tone',
+  'person-shrugging-medium-dark-skin-tone',
+  'person-shrugging-medium-light-skin-tone',
+  'person-shrugging-medium-skin-tone',
+  'person-surfing',
+  'person-surfing-dark-skin-tone',
+  'person-surfing-light-skin-tone',
+  'person-surfing-medium-dark-skin-tone',
+  'person-surfing-medium-light-skin-tone',
+  'person-surfing-medium-skin-tone',
+  'person-swimming',
+  'person-swimming-dark-skin-tone',
+  'person-swimming-light-skin-tone',
+  'person-swimming-medium-dark-skin-tone',
+  'person-swimming-medium-light-skin-tone',
+  'person-swimming-medium-skin-tone',
+  'person-taking-bath',
+  'person-taking-bath-dark-skin-tone',
+  'person-taking-bath-light-skin-tone',
+  'person-taking-bath-medium-dark-skin-tone',
+  'person-taking-bath-medium-light-skin-tone',
+  'person-taking-bath-medium-skin-tone',
+  'person-tipping-hand',
+  'person-tipping-hand-dark-skin-tone',
+  'person-tipping-hand-light-skin-tone',
+  'person-tipping-hand-medium-dark-skin-tone',
+  'person-tipping-hand-medium-light-skin-tone',
+  'person-tipping-hand-medium-skin-tone',
+  'person-walking',
+  'person-walking-dark-skin-tone',
+  'person-walking-light-skin-tone',
+  'person-walking-medium-dark-skin-tone',
+  'person-walking-medium-light-skin-tone',
+  'person-walking-medium-skin-tone',
+  'person-wearing-turban',
+  'person-wearing-turban-dark-skin-tone',
+  'person-wearing-turban-light-skin-tone',
+  'person-wearing-turban-medium-dark-skin-tone',
+  'person-wearing-turban-medium-light-skin-tone',
+  'person-wearing-turban-medium-skin-tone',
+  'pick',
+  'pig',
+  'pig-face',
+  'pig-nose',
+  'pile-of-poo',
+  'pill',
+  'pine-decoration',
+  'pineapple',
+  'ping-pong',
+  'pisces',
+  'pistol',
+  'pizza',
+  'place-of-worship',
+  'play-button',
+  'play-or-pause-button',
+  'police-car',
+  'police-car-light',
+  'police-officer',
+  'police-officer-dark-skin-tone',
+  'police-officer-light-skin-tone',
+  'police-officer-medium-dark-skin-tone',
+  'police-officer-medium-light-skin-tone',
+  'police-officer-medium-skin-tone',
+  'poodle',
+  'pool-8-ball',
+  'popcorn',
+  'post-office',
+  'postal-horn',
+  'postbox',
+  'pot-of-food',
+  'potable-water',
+  'potato',
+  'poultry-leg',
+  'pound-banknote',
+  'pound-symbol',
+  'pouting-cat-face',
+  'pouting-face',
+  'prayer-beads',
+  'pregnant-woman',
+  'pregnant-woman-dark-skin-tone',
+  'pregnant-woman-light-skin-tone',
+  'pregnant-woman-medium-dark-skin-tone',
+  'pregnant-woman-medium-light-skin-tone',
+  'pregnant-woman-medium-skin-tone',
+  'prince',
+  'prince-dark-skin-tone',
+  'prince-light-skin-tone',
+  'prince-medium-dark-skin-tone',
+  'prince-medium-light-skin-tone',
+  'prince-medium-skin-tone',
+  'princess',
+  'princess-dark-skin-tone',
+  'princess-light-skin-tone',
+  'princess-medium-dark-skin-tone',
+  'princess-medium-light-skin-tone',
+  'princess-medium-skin-tone',
+  'printer',
+  'prohibited',
+  'purple-heart',
+  'purse',
+  'pushpin',
+  'question-mark',
+  'rabbit',
+  'rabbit-face',
+  'racing-car',
+  'radio',
+  'radio-button',
+  'radioactive',
+  'railway-car',
+  'railway-track',
+  'rainbow',
+  'raised-back-of-hand',
+  'raised-back-of-hand-dark-skin-tone',
+  'raised-back-of-hand-light-skin-tone',
+  'raised-back-of-hand-medium-dark-skin-tone',
+  'raised-back-of-hand-medium-light-skin-tone',
+  'raised-back-of-hand-medium-skin-tone',
+  'raised-fist',
+  'raised-fist-dark-skin-tone',
+  'raised-fist-light-skin-tone',
+  'raised-fist-medium-dark-skin-tone',
+  'raised-fist-medium-light-skin-tone',
+  'raised-fist-medium-skin-tone',
+  'raised-hand',
+  'raised-hand-dark-skin-tone',
+  'raised-hand-light-skin-tone',
+  'raised-hand-medium-dark-skin-tone',
+  'raised-hand-medium-light-skin-tone',
+  'raised-hand-medium-skin-tone',
+  'raising-hands',
+  'raising-hands-dark-skin-tone',
+  'raising-hands-light-skin-tone',
+  'raising-hands-medium-dark-skin-tone',
+  'raising-hands-medium-light-skin-tone',
+  'raising-hands-medium-skin-tone',
+  'ram',
+  'rat',
+  'record-button',
+  'recycling-symbol',
+  'red-apple',
+  'red-circle',
+  'red-heart',
+  'red-paper-lantern',
+  'red-triangle-pointed-down',
+  'red-triangle-pointed-up',
+  'registered',
+  'relieved-face',
+  'reminder-ribbon',
+  'repeat-button',
+  'repeat-single-button',
+  'rescue-workers-helmet',
+  'restroom',
+  'reverse-button',
+  'revolving-hearts',
+  'rhinoceros',
+  'ribbon',
+  'rice-ball',
+  'rice-cracker',
+  'right-anger-bubble',
+  'right-arrow',
+  'right-arrow-curving-down',
+  'right-arrow-curving-left',
+  'right-arrow-curving-up',
+  'right-facing-fist',
+  'right-facing-fist-dark-skin-tone',
+  'right-facing-fist-light-skin-tone',
+  'right-facing-fist-medium-dark-skin-tone',
+  'right-facing-fist-medium-light-skin-tone',
+  'right-facing-fist-medium-skin-tone',
+  'ring',
+  'roasted-sweet-potato',
+  'robot-face',
+  'rocket',
+  'rolled-up-newspaper',
+  'roller-coaster',
+  'rolling-on-the-floor-laughing',
+  'rooster',
+  'rose',
+  'rosette',
+  'round-pushpin',
+  'rugby-football',
+  'running-shirt',
+  'running-shoe',
+  'sad-but-relieved-face',
+  'sagittarius',
+  'sailboat',
+  'sake',
+  'santa-claus',
+  'santa-claus-dark-skin-tone',
+  'santa-claus-light-skin-tone',
+  'santa-claus-medium-dark-skin-tone',
+  'santa-claus-medium-light-skin-tone',
+  'santa-claus-medium-skin-tone',
+  'satellite',
+  'satellite-antenna',
+  'saxophone',
+  'school',
+  'scissors',
+  'scorpio',
+  'scorpion',
+  'scroll',
+  'seat',
+  'see-no-evil-monkey',
+  'seedling',
+  'selfie',
+  'selfie-dark-skin-tone',
+  'selfie-light-skin-tone',
+  'selfie-medium-dark-skin-tone',
+  'selfie-medium-light-skin-tone',
+  'selfie-medium-skin-tone',
+  'seven-oclock',
+  'seven-thirty',
+  'shallow-pan-of-food',
+  'shamrock',
+  'shark',
+  'shaved-ice',
+  'sheaf-of-rice',
+  'shield',
+  'shinto-shrine',
+  'ship',
+  'shooting-star',
+  'shopping-bags',
+  'shopping-cart',
+  'shortcake',
+  'shower',
+  'shrimp',
+  'shuffle-tracks-button',
+  'sign-of-the-horns',
+  'sign-of-the-horns-dark-skin-tone',
+  'sign-of-the-horns-light-skin-tone',
+  'sign-of-the-horns-medium-dark-skin-tone',
+  'sign-of-the-horns-medium-light-skin-tone',
+  'sign-of-the-horns-medium-skin-tone',
+  'six-oclock',
+  'six-thirty',
+  'skier',
+  'skis',
+  'skull',
+  'skull-and-crossbones',
+  'sleeping-face',
+  'sleepy-face',
+  'slightly-frowning-face',
+  'slightly-smiling-face',
+  'slot-machine',
+  'small-airplane',
+  'small-blue-diamond',
+  'small-orange-diamond',
+  'smiling-cat-face-with-heart-eyes',
+  'smiling-face',
+  'smiling-face-with-halo',
+  'smiling-face-with-heart-eyes',
+  'smiling-face-with-horns',
+  'smiling-face-with-smiling-eyes',
+  'smiling-face-with-sunglasses',
+  'smirking-face',
+  'snail',
+  'snake',
+  'sneezing-face',
+  'snow-capped-mountain',
+  'snowboarder',
+  'snowflake',
+  'snowman',
+  'snowman-without-snow',
+  'soccer-ball',
+  'soft-ice-cream',
+  'soon-arrow',
+  'sos-button',
+  'spade-suit',
+  'spaghetti',
+  'sparkle',
+  'sparkler',
+  'sparkles',
+  'sparkling-heart',
+  'speak-no-evil-monkey',
+  'speaker-high-volume',
+  'speaker-low-volume',
+  'speaker-medium-volume',
+  'speaking-head',
+  'speech-balloon',
+  'speedboat',
+  'spider',
+  'spider-web',
+  'spiral-calendar',
+  'spiral-notepad',
+  'spiral-shell',
+  'spoon',
+  'sport-utility-vehicle',
+  'sports-medal',
+  'spouting-whale',
+  'squid',
+  'squinting-face-with-tongue',
+  'stadium',
+  'star',
+  'star-and-crescent',
+  'star-of-david',
+  'station',
+  'statue-of-liberty',
+  'steaming-bowl',
+  'stop-button',
+  'stop-sign',
+  'stopwatch',
+  'straight-ruler',
+  'strawberry',
+  'studio-microphone',
+  'stuffed-flatbread',
+  'sun',
+  'sun-behind-cloud',
+  'sun-behind-large-cloud',
+  'sun-behind-rain-cloud',
+  'sun-behind-small-cloud',
+  'sun-with-face',
+  'sunflower',
+  'sunglasses',
+  'sunrise',
+  'sunrise-over-mountains',
+  'sunset',
+  'sushi',
+  'suspension-railway',
+  'sweat-droplets',
+  'synagogue',
+  'syringe',
+  't-shirt',
+  'taco',
+  'tanabata-tree',
+  'tangerine',
+  'taurus',
+  'taxi',
+  'teacup-without-handle',
+  'tear-off-calendar',
+  'telephone',
+  'telephone-receiver',
+  'telescope',
+  'television',
+  'ten-oclock',
+  'ten-thirty',
+  'tennis',
+  'tent',
+  'thermometer',
+  'thinking-face',
+  'thought-balloon',
+  'three-oclock',
+  'three-thirty',
+  'thumbs-down',
+  'thumbs-down-dark-skin-tone',
+  'thumbs-down-light-skin-tone',
+  'thumbs-down-medium-dark-skin-tone',
+  'thumbs-down-medium-light-skin-tone',
+  'thumbs-down-medium-skin-tone',
+  'thumbs-up',
+  'thumbs-up-dark-skin-tone',
+  'thumbs-up-light-skin-tone',
+  'thumbs-up-medium-dark-skin-tone',
+  'thumbs-up-medium-light-skin-tone',
+  'thumbs-up-medium-skin-tone',
+  'ticket',
+  'tiger',
+  'tiger-face',
+  'timer-clock',
+  'tired-face',
+  'toilet',
+  'tokyo-tower',
+  'tomato',
+  'tongue',
+  'top-arrow',
+  'top-hat',
+  'tornado',
+  'trackball',
+  'tractor',
+  'trade-mark',
+  'train',
+  'tram',
+  'tram-car',
+  'triangular-ruler',
+  'trident-emblem',
+  'trolleybus',
+  'trophy',
+  'tropical-drink',
+  'tropical-fish',
+  'trumpet',
+  'tulip',
+  'tumbler-glass',
+  'turkey',
+  'turtle',
+  'twelve-oclock',
+  'twelve-thirty',
+  'two-hearts',
+  'two-hump-camel',
+  'two-men-holding-hands',
+  'two-oclock',
+  'two-thirty',
+  'two-women-holding-hands',
+  'umbrella',
+  'umbrella-on-ground',
+  'umbrella-with-rain-drops',
+  'unamused-face',
+  'unicorn-face',
+  'unlocked',
+  'up-arrow',
+  'up-down-arrow',
+  'up-left-arrow',
+  'up-right-arrow',
+  'up-text-button',
+  'upside-down-face',
+  'upwards-button',
+  'vertical-traffic-light',
+  'vibration-mode',
+  'victory-hand',
+  'victory-hand-dark-skin-tone',
+  'victory-hand-light-skin-tone',
+  'victory-hand-medium-dark-skin-tone',
+  'victory-hand-medium-light-skin-tone',
+  'victory-hand-medium-skin-tone',
+  'video-camera',
+  'video-game',
+  'videocassette',
+  'violin',
+  'virgo',
+  'volcano',
+  'volleyball',
+  'vs-button',
+  'vulcan-salute',
+  'vulcan-salute-dark-skin-tone',
+  'vulcan-salute-light-skin-tone',
+  'vulcan-salute-medium-dark-skin-tone',
+  'vulcan-salute-medium-light-skin-tone',
+  'vulcan-salute-medium-skin-tone',
+  'waning-crescent-moon',
+  'waning-gibbous-moon',
+  'warning',
+  'wastebasket',
+  'watch',
+  'water-buffalo',
+  'water-closet',
+  'water-wave',
+  'watermelon',
+  'waving-hand',
+  'waving-hand-dark-skin-tone',
+  'waving-hand-light-skin-tone',
+  'waving-hand-medium-dark-skin-tone',
+  'waving-hand-medium-light-skin-tone',
+  'waving-hand-medium-skin-tone',
+  'wavy-dash',
+  'waxing-crescent-moon',
+  'waxing-gibbous-moon',
+  'weary-cat-face',
+  'weary-face',
+  'wedding',
+  'whale',
+  'wheel-of-dharma',
+  'wheelchair-symbol',
+  'white-circle',
+  'white-exclamation-mark',
+  'white-flower',
+  'white-heavy-check-mark',
+  'white-large-square',
+  'white-medium-small-square',
+  'white-medium-square',
+  'white-question-mark',
+  'white-small-square',
+  'white-square-button',
+  'wilted-flower',
+  'wind-chime',
+  'wind-face',
+  'wine-glass',
+  'winking-face',
+  'winking-face-with-tongue',
+  'wolf',
+  'woman',
+  'woman-dancing',
+  'woman-dancing-dark-skin-tone',
+  'woman-dancing-light-skin-tone',
+  'woman-dancing-medium-dark-skin-tone',
+  'woman-dancing-medium-light-skin-tone',
+  'woman-dancing-medium-skin-tone',
+  'woman-dark-skin-tone',
+  'woman-light-skin-tone',
+  'woman-medium-dark-skin-tone',
+  'woman-medium-light-skin-tone',
+  'woman-medium-skin-tone',
+  'womans-boot',
+  'womans-clothes',
+  'womans-hat',
+  'womans-sandal',
+  'womens-room',
+  'world-map',
+  'worried-face',
+  'wrapped-gift',
+  'wrench',
+  'writing-hand',
+  'writing-hand-dark-skin-tone',
+  'writing-hand-light-skin-tone',
+  'writing-hand-medium-dark-skin-tone',
+  'writing-hand-medium-light-skin-tone',
+  'writing-hand-medium-skin-tone',
+  'yellow-heart',
+  'yen-banknote',
+  'yin-yang',
+  'zipper-mouth-face',
+  'zzz',
+]
+
+const filteredIcons = computed(() => {
+  return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
+})
+</script>
+
+<template>
+  <a-card class="overflow-y-auto">
+    <a-input-search v-model:value="search" class="w-full overflow-y-auto !m-4" placeholder="Search"></a-input-search>
+    <div class="flex gap-4 flex-wrap w-full m-4 max-w-80 max-h-40">
+      <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
+        <span class="iconify cursor-pointer active:ring" :data-icon="`emojione:${icon}`"></span>
+      </div>
+    </div>
+  </a-card>
+</template>

From 3ae2e0e1c4d16cd0f22ee6fe2dd801cf3046b368 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 7 Dec 2022 11:36:27 +0530
Subject: [PATCH 03/41] feat(api): add api for updating table meta

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/meta/api/tableApis.ts | 16 ++++-
 packages/nocodb/src/lib/models/Model.ts       | 60 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/packages/nocodb/src/lib/meta/api/tableApis.ts b/packages/nocodb/src/lib/meta/api/tableApis.ts
index e18886cbeb..25e67fde2c 100644
--- a/packages/nocodb/src/lib/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/meta/api/tableApis.ts
@@ -228,9 +228,23 @@ export async function tableCreate(req: Request<any, any, TableReqType>, res) {
 export async function tableUpdate(req: Request<any, any>, res) {
   const model = await Model.get(req.params.tableId);
 
-  const project = await Project.getWithInfo(req.body.project_id);
+  const project = await Project.getWithInfo(
+    req.body.project_id || (req as any).ncProjectId
+  );
   const base = project.bases.find((b) => b.id === model.base_id);
 
+  if (model.project_id !== project.id) {
+    NcError.badRequest('Model does not belong to project');
+  }
+
+  // if meta present update meta and return
+  // todo: allow user to update meta  and other prop in single api call
+  if ('meta' in req.body) {
+    await Model.updateMeta(req.params.tableId, req.body.meta);
+
+    return res.json({ msg: 'success' });
+  }
+
   if (!req.body.table_name) {
     NcError.badRequest(
       'Missing table name `table_name` property in request body'
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index d7fabd25ac..816ae25432 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -22,6 +22,20 @@ import { NcError } from '../meta/helpers/catchError';
 import Audit from './Audit';
 import { sanitize } from '../db/sql-data-mapper/lib/sql/helpers/sanitize';
 
+function parseMetaProp(modelorModelList: Model[] | Model) {
+  // parse meta property
+  for (const model of Array.isArray(modelorModelList)
+    ? modelorModelList
+    : [modelorModelList]) {
+    try {
+      model.meta =
+        typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta;
+    } catch {
+      model.meta = {};
+    }
+  }
+}
+
 export default class Model implements TableType {
   copy_enabled: boolean;
   created_at: Date | number | string;
@@ -51,6 +65,7 @@ export default class Model implements TableType {
   columns?: Column[];
   columnsById?: { [id: string]: Column };
   views?: View[];
+  meta?: Record<string, any> | string
 
   constructor(data: Partial<TableType | Model>) {
     Object.assign(this, data);
@@ -175,8 +190,14 @@ export default class Model implements TableType {
         }
       );
 
+      parseMetaProp(modelList);
+
       if (base_id) {
-        await NocoCache.setList(CacheScope.MODEL, [project_id, base_id], modelList);
+        await NocoCache.setList(
+          CacheScope.MODEL,
+          [project_id, base_id],
+          modelList
+        );
       } else {
         await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
       }
@@ -210,6 +231,8 @@ export default class Model implements TableType {
         MetaTable.MODELS
       );
 
+      parseMetaProp(modelList);
+
       await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
     }
 
@@ -230,8 +253,11 @@ export default class Model implements TableType {
       ));
     if (!modelData) {
       modelData = await ncMeta.metaGet2(null, null, MetaTable.MODELS, id);
-      if (modelData)
+
+      if (modelData) {
+        parseMetaProp(modelData);
         await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
+      }
     }
     return modelData && new Model(modelData);
   }
@@ -256,6 +282,7 @@ export default class Model implements TableType {
         CacheGetType.TYPE_OBJECT
       ));
     if (!modelData) {
+      parseMetaProp(modelData);
       modelData = await ncMeta.metaGet2(null, null, MetaTable.MODELS, k);
       // if (
       //   this.baseModels?.[modelData.base_id]?.[modelData.db_alias]?.[
@@ -300,6 +327,7 @@ export default class Model implements TableType {
         CacheGetType.TYPE_OBJECT
       ));
     if (!modelData) {
+      parseMetaProp(modelData);
       modelData = await ncMeta.metaGet2(
         null,
         null,
@@ -722,4 +750,32 @@ export default class Model implements TableType {
       {}
     );
   }
+
+  // For updating table meta
+  static async updateMeta(
+    tableId: string,
+    meta: string | Record<string, any>,
+    ncMeta = Noco.ncMeta
+  ) {
+    // get existing cache
+    const key = `${CacheScope.MODEL}:${tableId}`;
+    const existingCache = await NocoCache.get(key, CacheGetType.TYPE_OBJECT);
+    if (existingCache) {
+      try {
+        existingCache.meta = typeof meta === 'string' ? JSON.parse(meta) : meta;
+        // set cache
+        await NocoCache.set(key, existingCache);
+      } catch {}
+    }
+    // set meta
+    return await ncMeta.metaUpdate(
+      null,
+      null,
+      MetaTable.MODELS,
+      {
+        meta: typeof meta === 'object' ? JSON.stringify(meta) : meta,
+      },
+      tableId
+    );
+  }
 }

From 1a975db018f85a476b4b71ce15ac3e65a206d10c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 7 Dec 2022 11:37:01 +0530
Subject: [PATCH 04/41] feat(sdk): add api in swagger json

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb-sdk/src/lib/Api.ts | 3 +++
 scripts/sdk/swagger.json           | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 375375a358..025a6beac1 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -124,6 +124,7 @@ export interface TableType {
   columnsById?: object;
   slug?: string;
   mm?: boolean | number;
+  meta?: any;
 }
 
 export interface ViewType {
@@ -175,6 +176,7 @@ export interface TableReqType {
   order?: number;
   mm?: boolean;
   columns: ColumnType[];
+  meta?: any;
 }
 
 export interface TableListType {
@@ -2159,6 +2161,7 @@ export class Api<
         table_name?: string;
         title?: string;
         project_id?: string;
+        meta?: any;
       },
       params: RequestParams = {}
     ) =>
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index c007114e09..b2a6ce14ed 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -1971,6 +1971,8 @@
                   },
                   "project_id": {
                     "type": "string"
+                  },
+                  "meta": {
                   }
                 }
               }
@@ -7484,6 +7486,8 @@
               "boolean",
               "number"
             ]
+          },
+          "meta": {
           }
         },
         "required": [
@@ -7823,6 +7827,8 @@
             "items": {
               "$ref": "#/components/schemas/Column"
             }
+          },
+          "meta": {
           }
         },
         "required": [

From d858ab4e98ef8c61c23d6d724cc3fc1f35670978 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 7 Dec 2022 16:15:17 +0530
Subject: [PATCH 05/41] fix(gui): toggle icon on change

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 75 ++++++++++++-------
 .../nc-gui/components/general/EmojiIcons.vue  | 23 ++++--
 .../nc-gui/components/general/IconifyIcon.vue |  7 ++
 packages/nc-gui/package-lock.json             | 40 +++++++++-
 packages/nc-gui/package.json                  |  4 +-
 5 files changed, 111 insertions(+), 38 deletions(-)
 create mode 100644 packages/nc-gui/components/general/IconifyIcon.vue

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 183053612b..1ed0b461c9 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -300,18 +300,30 @@ watch(
   { immediate: true },
 )
 
-
 const setIcon = (icon: string, table: TableType) => {
   table.meta = {
-    // ...table.meta || {},
+    ...(table.meta || {}),
     icon,
   }
+  tables.value.splice(tables.value.indexOf(table), 1, { ...table })
+
   $api.dbTable.update(table.id as string, {
-    meta: {
-      icon,
-    },
+    meta: table.meta,
   })
 }
+
+// const getTableIcon = (table: TableType) => {
+//   if (table.meta?.icon) {
+//     return h(
+//       'span',
+//       {
+//         'key': table.meta?.icon,
+//         'class': 'iconify !cursor-pointer !text-2xl',
+//         'data-icon': table.meta?.icon,
+//       },)
+//   }
+//   return icon(table)
+// }
 </script>
 
 <template>
@@ -546,14 +558,14 @@ const setIcon = (icon: string, table: TableType) => {
                   :nc-base="bases[0].id"
                 >
                   <div
-                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
+                    v-for="(table, i) of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
                       { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                       `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                     ]"
-                    class="nc-tree-item text-sm cursor-pointer group"
+                    class="nc-tree-item text-sm cursor-pointer group1"
                     :data-order="table.order"
                     :data-id="table.id"
                     :data-testid="`tree-view-table-${table.title}`"
@@ -563,8 +575,7 @@ const setIcon = (icon: string, table: TableType) => {
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-
-                          <a-popover trigger="hover" @click.stop>
+                          <a-popover trigger="click" @click.stop>
                             <div @click.stop>
                               <MdiDrag
                                 v-if="isUIAllowed('treeview-drag-n-drop')"
@@ -573,32 +584,38 @@ const setIcon = (icon: string, table: TableType) => {
                                 @click.stop.prevent
                               />
 
-                              <span v-if="table.meta?.icon" class="iconify cursor-pointer" :data-icon="table.meta?.icon"></span>
-
-                              <component
-                                v-else
-                                :is="icon(table)"
-                                class="nc-view-icon text-xs"
-                                :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                              />
+                              <a-tooltip>
+                                <span v-if="table.meta?.icon" :key="table.meta?.icon">
+                                  <GeneralIconifyIcon class="text-2xl" :key="table.meta?.icon" :icon="table.meta?.icon"></GeneralIconifyIcon>
+                                </span>
+                                <component
+                                  :is="icon(table)"
+                                  v-else
+                                  class="nc-view-icon text-xs"
+                                  :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                />
+
+                                <template #title>Change icon</template>
+                              </a-tooltip>
                             </div>
                             <template #content>
                               <LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" />
                             </template>
                           </a-popover>
 
-                          <MdiDragVertical
-                            v-if="isUIAllowed('treeview-drag-n-drop')"
-                            :class="`nc-child-draggable-icon-${table.title}`"
-                            class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                            @click.stop.prevent
-                          />
-
-                          <component
-                            :is="icon(table)"
-                            class="nc-view-icon text-xs"
-                            :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                          />
+                          <!--
+                                                    <MdiDragVertical
+                                                      v-if="isUIAllowed('treeview-drag-n-drop')"
+                                                      :class="`nc-child-draggable-icon-${table.title}`"
+                                                      class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
+                                                      @click.stop.prevent
+                                                    />
+
+                                                    <component
+                                                      :is="icon(table)"
+                                                      class="nc-view-icon text-xs"
+                                                      :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                                    /> -->
                         </div>
 
                         <div class="nc-tbl-title flex-1">
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index b62a23bb27..6df2ecd937 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
 const emit = defineEmits(['selectIcon'])
 const search = $ref('')
 
@@ -1843,15 +1845,26 @@ const icons = [
 const filteredIcons = computed(() => {
   return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
 })
+
 </script>
 
 <template>
-  <a-card class="overflow-y-auto">
-    <a-input-search v-model:value="search" class="w-full overflow-y-auto !m-4" placeholder="Search"></a-input-search>
-    <div class="flex gap-4 flex-wrap w-full m-4 max-w-80 max-h-40">
+  <div class="p-1 w-85 h-80 flex flex-col gap-1 justify-start">
+    <div>
+      <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
+    </div>
+    <div class="flex gap-4 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
-        <span class="iconify cursor-pointer active:ring" :data-icon="`emojione:${icon}`"></span>
+        <span class="cursor-pointer nc-emoji-item">
+          <Icon class="text-2xl iconify"
+                :icon="`emojione:${icon}`"></Icon>
+        </span>
       </div>
     </div>
-  </a-card>
+  </div>
 </template>
+<style scoped>
+.nc-emoji-item {
+  @apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center;
+}
+</style>
diff --git a/packages/nc-gui/components/general/IconifyIcon.vue b/packages/nc-gui/components/general/IconifyIcon.vue
new file mode 100644
index 0000000000..c5fb192848
--- /dev/null
+++ b/packages/nc-gui/components/general/IconifyIcon.vue
@@ -0,0 +1,7 @@
+<template>
+  <Icon :icon="icon"/>
+</template>
+
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+</script>
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index c05611aa7a..5521ba43dc 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -9,7 +9,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.2.0",
-        "@iconify/iconify": "^2.2.1",
+        "@iconify/vue": "^4.0.1",
         "@types/file-saver": "^2.0.5",
         "@vue-flow/additional-components": "^1.2.0",
         "@vue-flow/core": "^1.3.0",
@@ -1210,6 +1210,7 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
       "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "dev": true,
       "funding": {
         "url": "http://github.com/sponsors/cyberalien"
       }
@@ -1234,6 +1235,25 @@
         "local-pkg": "^0.4.1"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
+      "integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
+    "node_modules/@iconify/vue/node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
     "node_modules/@intlify/bundle-utils": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
@@ -18576,7 +18596,8 @@
     "@iconify/iconify": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.2.1.tgz",
-      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ=="
+      "integrity": "sha512-WJzw+3iicrF/tbjbxxRinSgy5FHdJoz/egTqwi3xCDkNRJPq482RX1iyaWrjNuY2vMNSPkQMuqHvZDXgA+WnwQ==",
+      "dev": true
     },
     "@iconify/types": {
       "version": "1.1.0",
@@ -18598,6 +18619,21 @@
         "local-pkg": "^0.4.1"
       }
     },
+    "@iconify/vue": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.0.1.tgz",
+      "integrity": "sha512-k4VwcSQpGqJpoyqENRRviFuXlVcquLvQ6BKLNJ6o2amZo7u+3HyALSO79Xyz7Sg68szQGstOk6weaKUF0DJbog==",
+      "requires": {
+        "@iconify/types": "^2.0.0"
+      },
+      "dependencies": {
+        "@iconify/types": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+          "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+        }
+      }
+    },
     "@intlify/bundle-utils": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-2.2.2.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 6f3ff2f551..aebde1d385 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -32,7 +32,8 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",
-    "@iconify/iconify": "^2.2.1",
+    "@iconify/vue": "^4.0.1",
+    "@types/file-saver": "^2.0.5",
     "@vue-flow/additional-components": "^1.2.0",
     "@vue-flow/core": "^1.3.0",
     "@vuelidate/core": "^2.0.0-alpha.44",
@@ -42,7 +43,6 @@
     "ant-design-vue": "^3.2.11",
     "d3-scale": "^4.0.2",
     "dagre": "^0.8.5",
-    "@types/file-saver": "^2.0.5",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",

From da7ae2190ad9dd61ffaa7a7afe7d39708c10447b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 7 Dec 2022 17:07:24 +0530
Subject: [PATCH 06/41] feat(gui): show emoji in tab level

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue   | 18 +++++++++++-------
 .../nc-gui/components/general/EmojiIcons.vue   | 11 +++++------
 .../nc-gui/components/general/IconifyIcon.vue  | 10 +++++-----
 .../smartsheet/column/CurrencyOptions.vue      |  1 -
 packages/nc-gui/composables/useTabs.ts         |  4 ++++
 packages/nc-gui/lib/types.ts                   |  1 +
 .../[projectType]/[projectId]/index/index.vue  |  3 ++-
 7 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 1ed0b461c9..22b1c51054 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -558,7 +558,7 @@ const setIcon = (icon: string, table: TableType) => {
                   :nc-base="bases[0].id"
                 >
                   <div
-                    v-for="(table, i) of tables.filter((table) => table.base_id === bases[0].id)"
+                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
@@ -575,7 +575,7 @@ const setIcon = (icon: string, table: TableType) => {
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                          <a-popover trigger="click" @click.stop>
+                          <a-dropdown trigger="click" @click.stop>
                             <div @click.stop>
                               <MdiDrag
                                 v-if="isUIAllowed('treeview-drag-n-drop')"
@@ -586,22 +586,26 @@ const setIcon = (icon: string, table: TableType) => {
 
                               <a-tooltip>
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon">
-                                  <GeneralIconifyIcon class="text-2xl" :key="table.meta?.icon" :icon="table.meta?.icon"></GeneralIconifyIcon>
+                                  <GeneralIconifyIcon
+                                    :key="table.meta?.icon"
+                                    class="text-xl"
+                                    :icon="table.meta?.icon"
+                                  ></GeneralIconifyIcon>
                                 </span>
                                 <component
                                   :is="icon(table)"
                                   v-else
-                                  class="nc-view-icon text-xs"
+                                  class="nc-view-icon"
                                   :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                 />
 
                                 <template #title>Change icon</template>
                               </a-tooltip>
                             </div>
-                            <template #content>
-                              <LazyGeneralEmojiIcons @selectIcon="setIcon($event, table)" />
+                            <template #overlay>
+                              <LazyGeneralEmojiIcons class="shadow bg-white p-2" @selectIcon="setIcon($event, table)" />
                             </template>
-                          </a-popover>
+                          </a-dropdown>
 
                           <!--
                                                     <MdiDragVertical
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index 6df2ecd937..d7c2148624 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import { Icon } from '@iconify/vue'
 
 const emit = defineEmits(['selectIcon'])
 const search = $ref('')
@@ -1845,24 +1845,23 @@ const icons = [
 const filteredIcons = computed(() => {
   return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
 })
-
 </script>
 
 <template>
-  <div class="p-1 w-85 h-80 flex flex-col gap-1 justify-start">
+  <div class="p-1 w-70 h-75 flex flex-col gap-1 justify-start">
     <div>
       <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
     </div>
-    <div class="flex gap-4 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
+    <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
         <span class="cursor-pointer nc-emoji-item">
-          <Icon class="text-2xl iconify"
-                :icon="`emojione:${icon}`"></Icon>
+          <Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon>
         </span>
       </div>
     </div>
   </div>
 </template>
+
 <style scoped>
 .nc-emoji-item {
   @apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center;
diff --git a/packages/nc-gui/components/general/IconifyIcon.vue b/packages/nc-gui/components/general/IconifyIcon.vue
index c5fb192848..b8589dda2e 100644
--- a/packages/nc-gui/components/general/IconifyIcon.vue
+++ b/packages/nc-gui/components/general/IconifyIcon.vue
@@ -1,7 +1,7 @@
-<template>
-  <Icon :icon="icon"/>
-</template>
-
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue';
+import { Icon } from '@iconify/vue'
 </script>
+
+<template>
+  <Icon :icon="icon" />
+</template>
diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index 07a7d606f3..188f3da180 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -3,7 +3,6 @@ import {
   computed,
   currencyCodes,
   currencyLocales,
-  useProject,
   useVModel,
   validateCurrencyCode,
   validateCurrencyLocale,
diff --git a/packages/nc-gui/composables/useTabs.ts b/packages/nc-gui/composables/useTabs.ts
index d08b322ec8..24ca6ceca2 100644
--- a/packages/nc-gui/composables/useTabs.ts
+++ b/packages/nc-gui/composables/useTabs.ts
@@ -41,6 +41,8 @@ const [setup, use] = useInjectionState(() => {
 
         tab.title = currentTable.title
 
+        tab.meta = currentTable.meta
+
         // append base alias to tab title if duplicate titles exist on other bases
         if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
           tab.title = `${tab.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
@@ -92,6 +94,8 @@ const [setup, use] = useInjectionState(() => {
       const currentTable = tables.value.find((t) => t.id === tabMeta.id || t.title === tabMeta.id)
       const currentBase = bases.value.find((b) => b.id === currentTable?.base_id)
 
+      tabMeta.meta = currentTable?.meta
+
       // append base alias to tab title if duplicate titles exist on other bases
       if (tables.value.find((t) => t.title === currentTable?.title && t.base_id !== currentTable?.base_id))
         tabMeta.title = `${tabMeta.title}${currentBase?.alias ? ` (${currentBase.alias})` : ``}`
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 49ce8be69d..2024d82f7e 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -78,6 +78,7 @@ export interface TabItem {
   viewId?: string
   sortsState?: Map<string, any>
   filterState?: Map<string, any>
+  meta?: Record<string, any>
 }
 
 export interface SharedViewMeta extends Record<string, any> {
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 8b5d7709d2..682e3ccae3 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -48,7 +48,8 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
             <template #tab>
               <div class="flex items-center gap-2 max-w-[110px]">
                 <div class="flex items-center">
-                  <component :is="icon(tab)" class="text-sm" />
+                  <GeneralIconifyIcon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" />
+                  <component :is="icon(tab)" v-else class="text-sm" />
                 </div>
 
                 <a-tooltip v-if="tab.title?.length > 12" placement="bottom">

From 41f21d9ad1d44ee93373eba24ee25b24013e2344 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 7 Dec 2022 17:16:08 +0530
Subject: [PATCH 07/41] refactor(gui): enable drag n drop

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue      | 10 +++++-----
 .../components/smartsheet/column/CurrencyOptions.vue   |  9 +--------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 22b1c51054..7cbdea14cb 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -77,7 +77,7 @@ const initSortable = (el: Element) => {
   if (!base_id) return
   if (sortables[base_id]) sortables[base_id].destroy()
   Sortable.create(el as HTMLLIElement, {
-    handle: '.nc-drag-icon',
+    // handle: '.nc-drag-icon',
     onEnd: async (evt) => {
       const offset = tables.value.findIndex((table) => table.base_id === base_id)
 
@@ -565,7 +565,7 @@ const setIcon = (icon: string, table: TableType) => {
                       { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                       `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                     ]"
-                    class="nc-tree-item text-sm cursor-pointer group1"
+                    class="nc-tree-item text-sm cursor-pointer group"
                     :data-order="table.order"
                     :data-id="table.id"
                     :data-testid="`tree-view-table-${table.title}`"
@@ -577,12 +577,12 @@ const setIcon = (icon: string, table: TableType) => {
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
                           <a-dropdown trigger="click" @click.stop>
                             <div @click.stop>
-                              <MdiDrag
+<!--                              <MdiDrag
                                 v-if="isUIAllowed('treeview-drag-n-drop')"
                                 :class="`nc-child-draggable-icon-${table.title}`"
                                 class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
                                 @click.stop.prevent
-                              />
+                              />-->
 
                               <a-tooltip>
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon">
@@ -596,7 +596,7 @@ const setIcon = (icon: string, table: TableType) => {
                                   :is="icon(table)"
                                   v-else
                                   class="nc-view-icon"
-                                  :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                  :class="{ ' group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                 />
 
                                 <template #title>Change icon</template>
diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index 188f3da180..ca907ba8bd 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  currencyCodes,
-  currencyLocales,
-  useVModel,
-  validateCurrencyCode,
-  validateCurrencyLocale,
-} from '#imports'
+import { computed, currencyCodes, currencyLocales, useVModel, validateCurrencyCode, validateCurrencyLocale } from '#imports'
 
 interface Option {
   label: string

From ec1ff6cef10b8121d8e87f84ea49daa0daa849eb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 09:48:04 +0530
Subject: [PATCH 08/41] feat(gui): on icon update change icon in tab level as
 well

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 7cbdea14cb..b1f7a727d7 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -27,7 +27,7 @@ import {
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 
-const { addTab } = useTabs()
+const { addTab , updateTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
@@ -307,23 +307,14 @@ const setIcon = (icon: string, table: TableType) => {
   }
   tables.value.splice(tables.value.indexOf(table), 1, { ...table })
 
+
+  updateTab({ id: table.id }, { meta: table.meta })
+
   $api.dbTable.update(table.id as string, {
     meta: table.meta,
   })
 }
 
-// const getTableIcon = (table: TableType) => {
-//   if (table.meta?.icon) {
-//     return h(
-//       'span',
-//       {
-//         'key': table.meta?.icon,
-//         'class': 'iconify !cursor-pointer !text-2xl',
-//         'data-icon': table.meta?.icon,
-//       },)
-//   }
-//   return icon(table)
-// }
 </script>
 
 <template>
@@ -603,7 +594,7 @@ const setIcon = (icon: string, table: TableType) => {
                               </a-tooltip>
                             </div>
                             <template #overlay>
-                              <LazyGeneralEmojiIcons class="shadow bg-white p-2" @selectIcon="setIcon($event, table)" />
+                              <LazyGeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
                             </template>
                           </a-dropdown>
 

From 161647b7cab096758ba9629f00b7d2479a4f4bb2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 09:52:44 +0530
Subject: [PATCH 09/41] refactor(gui): provide identical spacing between icon
 and text in treeview

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index b1f7a727d7..4fcd441e12 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -435,7 +435,7 @@ const setIcon = (icon: string, table: TableType) => {
             class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
-            <MdiPlus />
+            <MdiPlus class="w-5" />
 
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
 
@@ -586,8 +586,8 @@ const setIcon = (icon: string, table: TableType) => {
                                 <component
                                   :is="icon(table)"
                                   v-else
-                                  class="nc-view-icon"
-                                  :class="{ ' group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                                  class="nc-view-icon w-5"
+                                  :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                 />
 
                                 <template #title>Change icon</template>

From 1f9e2a521fa7189887985e68cb919db3e0433e10 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 10:02:29 +0530
Subject: [PATCH 10/41] fix(gui): avoid closing menu if user clicked inside
 search input

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/general/EmojiIcons.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index d7c2148624..29d1b3c338 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1849,7 +1849,7 @@ const filteredIcons = computed(() => {
 
 <template>
   <div class="p-1 w-70 h-75 flex flex-col gap-1 justify-start">
-    <div>
+    <div @click.stop>
       <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
     </div>
     <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">

From 970b2b3229a77637235c280878766d3d33659e22 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 10:59:58 +0530
Subject: [PATCH 11/41] fix(gui): introduce infinite scroll to avoid delay in
 loading emoji list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue    | 17 ++++++-----------
 .../nc-gui/components/general/EmojiIcons.vue    | 14 ++++++++++++--
 .../nc-gui/components/general/IconifyIcon.vue   |  7 -------
 packages/nc-gui/package-lock.json               | 11 +++++++++++
 packages/nc-gui/package.json                    |  1 +
 .../[projectType]/[projectId]/index/index.vue   |  3 ++-
 6 files changed, 32 insertions(+), 21 deletions(-)
 delete mode 100644 packages/nc-gui/components/general/IconifyIcon.vue

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 4fcd441e12..2d84d402df 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -3,6 +3,7 @@ import type { TableType } from 'nocodb-sdk'
 import type { Input } from 'ant-design-vue'
 import Sortable from 'sortablejs'
 import GithubButton from 'vue-github-button'
+import { Icon } from '@iconify/vue'
 import type { VNodeRef } from '#imports'
 import {
   ClientType,
@@ -27,7 +28,7 @@ import {
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 
-const { addTab , updateTab } = useTabs()
+const { addTab, updateTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
@@ -307,14 +308,12 @@ const setIcon = (icon: string, table: TableType) => {
   }
   tables.value.splice(tables.value.indexOf(table), 1, { ...table })
 
-
   updateTab({ id: table.id }, { meta: table.meta })
 
   $api.dbTable.update(table.id as string, {
     meta: table.meta,
   })
 }
-
 </script>
 
 <template>
@@ -568,20 +567,16 @@ const setIcon = (icon: string, table: TableType) => {
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
                           <a-dropdown trigger="click" @click.stop>
                             <div @click.stop>
-<!--                              <MdiDrag
+                              <!--                              <MdiDrag
                                 v-if="isUIAllowed('treeview-drag-n-drop')"
                                 :class="`nc-child-draggable-icon-${table.title}`"
                                 class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
                                 @click.stop.prevent
-                              />-->
+                              /> -->
 
                               <a-tooltip>
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon">
-                                  <GeneralIconifyIcon
-                                    :key="table.meta?.icon"
-                                    class="text-xl"
-                                    :icon="table.meta?.icon"
-                                  ></GeneralIconifyIcon>
+                                  <Icon :key="table.meta?.icon" class="text-xl" :icon="table.meta?.icon"></Icon>
                                 </span>
                                 <component
                                   :is="icon(table)"
@@ -594,7 +589,7 @@ const setIcon = (icon: string, table: TableType) => {
                               </a-tooltip>
                             </div>
                             <template #overlay>
-                              <LazyGeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
+                              <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
                             </template>
                           </a-dropdown>
 
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index 29d1b3c338..9608d63123 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import InfiniteLoading from 'v3-infinite-loading'
 
 const emit = defineEmits(['selectIcon'])
 const search = $ref('')
@@ -1842,15 +1843,23 @@ const icons = [
   'zzz',
 ]
 
+let toIndex = $ref(60)
 const filteredIcons = computed(() => {
-  return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase()))
+  return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex)
 })
+
+const load = () => {
+  toIndex += Math.min(filteredIcons.value.length, toIndex + 60)
+  if (toIndex > filteredIcons.value.length) {
+    toIndex = filteredIcons.value.length
+  }
+}
 </script>
 
 <template>
   <div class="p-1 w-70 h-75 flex flex-col gap-1 justify-start">
     <div @click.stop>
-      <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" />
+      <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
     </div>
     <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
@@ -1858,6 +1867,7 @@ const filteredIcons = computed(() => {
           <Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon>
         </span>
       </div>
+      <InfiniteLoading @infinite="load"><span /></InfiniteLoading>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/general/IconifyIcon.vue b/packages/nc-gui/components/general/IconifyIcon.vue
deleted file mode 100644
index b8589dda2e..0000000000
--- a/packages/nc-gui/components/general/IconifyIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import { Icon } from '@iconify/vue'
-</script>
-
-<template>
-  <Icon :icon="icon" />
-</template>
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index 5521ba43dc..f0711461de 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -35,6 +35,7 @@
         "sortablejs": "^1.15.0",
         "tinycolor2": "^1.4.2",
         "unique-names-generator": "^4.7.1",
+        "v3-infinite-loading": "^1.2.2",
         "validator": "^13.7.0",
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
@@ -16190,6 +16191,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/v3-infinite-loading": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/v3-infinite-loading/-/v3-infinite-loading-1.2.2.tgz",
+      "integrity": "sha512-MWJc6yChnqeUasBFJ3Enu8IGPcQgRMSTrAEtT1MsHBEx+QjwvNTaY8o+8V9DgVt1MVhQSl3MC55hsaWLJmpRMw=="
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -29538,6 +29544,11 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "v3-infinite-loading": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/v3-infinite-loading/-/v3-infinite-loading-1.2.2.tgz",
+      "integrity": "sha512-MWJc6yChnqeUasBFJ3Enu8IGPcQgRMSTrAEtT1MsHBEx+QjwvNTaY8o+8V9DgVt1MVhQSl3MC55hsaWLJmpRMw=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index aebde1d385..927f80f41f 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -58,6 +58,7 @@
     "sortablejs": "^1.15.0",
     "tinycolor2": "^1.4.2",
     "unique-names-generator": "^4.7.1",
+    "v3-infinite-loading": "^1.2.2",
     "validator": "^13.7.0",
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 682e3ccae3..d43bf7be2f 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
 import { TabMetaInj, iconMap, provide, useGlobal, useSidebar, useTabs } from '#imports'
@@ -48,7 +49,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
             <template #tab>
               <div class="flex items-center gap-2 max-w-[110px]">
                 <div class="flex items-center">
-                  <GeneralIconifyIcon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" />
+                  <Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" />
                   <component :is="icon(tab)" v-else class="text-sm" />
                 </div>
 

From b4a85a16924ca19013f843f0d21bc1fda082b8a6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 11:16:24 +0530
Subject: [PATCH 12/41] fix(gui): parse meta properly after getting the data

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/models/Model.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 816ae25432..799395ae85 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -22,11 +22,13 @@ import { NcError } from '../meta/helpers/catchError';
 import Audit from './Audit';
 import { sanitize } from '../db/sql-data-mapper/lib/sql/helpers/sanitize';
 
-function parseMetaProp(modelorModelList: Model[] | Model) {
+function parseMetaProp(modelOrModelList: Model[] | Model) {
+  if (!modelOrModelList) return;
+
   // parse meta property
-  for (const model of Array.isArray(modelorModelList)
-    ? modelorModelList
-    : [modelorModelList]) {
+  for (const model of Array.isArray(modelOrModelList)
+    ? modelOrModelList
+    : [modelOrModelList]) {
     try {
       model.meta =
         typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta;
@@ -65,7 +67,7 @@ export default class Model implements TableType {
   columns?: Column[];
   columnsById?: { [id: string]: Column };
   views?: View[];
-  meta?: Record<string, any> | string
+  meta?: Record<string, any> | string;
 
   constructor(data: Partial<TableType | Model>) {
     Object.assign(this, data);
@@ -282,8 +284,8 @@ export default class Model implements TableType {
         CacheGetType.TYPE_OBJECT
       ));
     if (!modelData) {
-      parseMetaProp(modelData);
       modelData = await ncMeta.metaGet2(null, null, MetaTable.MODELS, k);
+      parseMetaProp(modelData);
       // if (
       //   this.baseModels?.[modelData.base_id]?.[modelData.db_alias]?.[
       //     modelData.title
@@ -327,7 +329,6 @@ export default class Model implements TableType {
         CacheGetType.TYPE_OBJECT
       ));
     if (!modelData) {
-      parseMetaProp(modelData);
       modelData = await ncMeta.metaGet2(
         null,
         null,
@@ -336,6 +337,7 @@ export default class Model implements TableType {
           table_name,
         }
       );
+      parseMetaProp(modelData);
       await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
       // modelData.filters = await Filter.getFilterObject({
       //   viewId: modelData.id

From 3669c8811af6003ff18e14a0c4b79646c74b4e4c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 11:16:49 +0530
Subject: [PATCH 13/41] fix(gui): reset filter value after selecting icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/general/EmojiIcons.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index 9608d63123..9b6b463304 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -3,7 +3,7 @@ import { Icon } from '@iconify/vue'
 import InfiniteLoading from 'v3-infinite-loading'
 
 const emit = defineEmits(['selectIcon'])
-const search = $ref('')
+let search = $ref('')
 
 // todo: move to utils
 const icons = [
@@ -1854,6 +1854,11 @@ const load = () => {
     toIndex = filteredIcons.value.length
   }
 }
+
+const selectIcon = (icon: string) => {
+  search = ''
+  emit('selectIcon', `emojione:${icon}`)
+}
 </script>
 
 <template>
@@ -1862,7 +1867,7 @@ const load = () => {
       <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
     </div>
     <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
-      <div v-for="icon of filteredIcons" :key="icon" @click="emit('selectIcon', `emojione:${icon}`)">
+      <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">
         <span class="cursor-pointer nc-emoji-item">
           <Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon>
         </span>

From 5802a85d57cf59ec4ccc134e510865c1b032b92f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 11:23:30 +0530
Subject: [PATCH 14/41] refactor(gui): move icons list to utils

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/general/EmojiIcons.vue  | 1842 +----------------
 packages/nc-gui/utils/iconUtils.ts            | 1837 ++++++++++++++++
 2 files changed, 1840 insertions(+), 1839 deletions(-)

diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index 9b6b463304..a13f677f6d 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -1,1851 +1,15 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import InfiniteLoading from 'v3-infinite-loading'
+import { emojiIcons } from '#imports'
 
 const emit = defineEmits(['selectIcon'])
 let search = $ref('')
 
-// todo: move to utils
-const icons = [
-  '1st-place-medal',
-  '2nd-place-medal',
-  '3rd-place-medal',
-  'a-button',
-  'ab-button',
-  'admission-tickets',
-  'aerial-tramway',
-  'airplane',
-  'airplane-arrival',
-  'airplane-departure',
-  'alarm-clock',
-  'alembic',
-  'alien',
-  'alien-monster',
-  'ambulance',
-  'american-football',
-  'amphora',
-  'anchor',
-  'anger-symbol',
-  'angry-face',
-  'angry-face-with-horns',
-  'anguished-face',
-  'ant',
-  'antenna-bars',
-  'anxious-face-with-sweat',
-  'aquarius',
-  'aries',
-  'articulated-lorry',
-  'artist-palette',
-  'asterisk',
-  'astonished-face',
-  'atm-sign',
-  'atom-symbol',
-  'automobile',
-  'avocado',
-  'b-button',
-  'baby',
-  'baby-angel',
-  'baby-angel-dark-skin-tone',
-  'baby-angel-light-skin-tone',
-  'baby-angel-medium-dark-skin-tone',
-  'baby-angel-medium-light-skin-tone',
-  'baby-angel-medium-skin-tone',
-  'baby-bottle',
-  'baby-chick',
-  'baby-dark-skin-tone',
-  'baby-light-skin-tone',
-  'baby-medium-dark-skin-tone',
-  'baby-medium-light-skin-tone',
-  'baby-medium-skin-tone',
-  'baby-symbol',
-  'back-arrow',
-  'backhand-index-pointing-down',
-  'backhand-index-pointing-down-dark-skin-tone',
-  'backhand-index-pointing-down-light-skin-tone',
-  'backhand-index-pointing-down-medium-dark-skin-tone',
-  'backhand-index-pointing-down-medium-light-skin-tone',
-  'backhand-index-pointing-down-medium-skin-tone',
-  'backhand-index-pointing-left',
-  'backhand-index-pointing-left-dark-skin-tone',
-  'backhand-index-pointing-left-light-skin-tone',
-  'backhand-index-pointing-left-medium-dark-skin-tone',
-  'backhand-index-pointing-left-medium-light-skin-tone',
-  'backhand-index-pointing-left-medium-skin-tone',
-  'backhand-index-pointing-right',
-  'backhand-index-pointing-right-dark-skin-tone',
-  'backhand-index-pointing-right-light-skin-tone',
-  'backhand-index-pointing-right-medium-dark-skin-tone',
-  'backhand-index-pointing-right-medium-light-skin-tone',
-  'backhand-index-pointing-right-medium-skin-tone',
-  'backhand-index-pointing-up',
-  'backhand-index-pointing-up-dark-skin-tone',
-  'backhand-index-pointing-up-light-skin-tone',
-  'backhand-index-pointing-up-medium-dark-skin-tone',
-  'backhand-index-pointing-up-medium-light-skin-tone',
-  'backhand-index-pointing-up-medium-skin-tone',
-  'backpack',
-  'bacon',
-  'badminton',
-  'baggage-claim',
-  'baguette-bread',
-  'balance-scale',
-  'balloon',
-  'ballot-box-with-ballot',
-  'ballot-box-with-check',
-  'banana',
-  'bank',
-  'bar-chart',
-  'barber-pole',
-  'baseball',
-  'basketball',
-  'bat',
-  'bathtub',
-  'battery',
-  'beach-with-umbrella',
-  'beaming-face-with-smiling-eyes',
-  'bear-face',
-  'beating-heart',
-  'bed',
-  'beer-mug',
-  'bell',
-  'bell-with-slash',
-  'bellhop-bell',
-  'bento-box',
-  'bicycle',
-  'bikini',
-  'biohazard',
-  'bird',
-  'birthday-cake',
-  'black-circle',
-  'black-heart',
-  'black-large-square',
-  'black-medium-small-square',
-  'black-medium-square',
-  'black-nib',
-  'black-small-square',
-  'black-square-button',
-  'blond-haired-person',
-  'blond-haired-person-dark-skin-tone',
-  'blond-haired-person-light-skin-tone',
-  'blond-haired-person-medium-dark-skin-tone',
-  'blond-haired-person-medium-light-skin-tone',
-  'blond-haired-person-medium-skin-tone',
-  'blossom',
-  'blowfish',
-  'blue-book',
-  'blue-circle',
-  'blue-heart',
-  'boar',
-  'bomb',
-  'bookmark',
-  'bookmark-tabs',
-  'books',
-  'bottle-with-popping-cork',
-  'bouquet',
-  'bow-and-arrow',
-  'bowling',
-  'boxing-glove',
-  'boy',
-  'boy-dark-skin-tone',
-  'boy-light-skin-tone',
-  'boy-medium-dark-skin-tone',
-  'boy-medium-light-skin-tone',
-  'boy-medium-skin-tone',
-  'bread',
-  'bride-with-veil',
-  'bride-with-veil-dark-skin-tone',
-  'bride-with-veil-light-skin-tone',
-  'bride-with-veil-medium-dark-skin-tone',
-  'bride-with-veil-medium-light-skin-tone',
-  'bride-with-veil-medium-skin-tone',
-  'bridge-at-night',
-  'briefcase',
-  'bright-button',
-  'broken-heart',
-  'bug',
-  'building-construction',
-  'bullet-train',
-  'burrito',
-  'bus',
-  'bus-stop',
-  'bust-in-silhouette',
-  'busts-in-silhouette',
-  'butterfly',
-  'cactus',
-  'calendar',
-  'call-me-hand',
-  'call-me-hand-dark-skin-tone',
-  'call-me-hand-light-skin-tone',
-  'call-me-hand-medium-dark-skin-tone',
-  'call-me-hand-medium-light-skin-tone',
-  'call-me-hand-medium-skin-tone',
-  'camel',
-  'camera',
-  'camera-with-flash',
-  'camping',
-  'cancer',
-  'candle',
-  'candy',
-  'canoe',
-  'capricorn',
-  'card-file-box',
-  'card-index',
-  'card-index-dividers',
-  'carousel-horse',
-  'carp-streamer',
-  'carrot',
-  'castle',
-  'cat',
-  'cat-face',
-  'cat-face-with-tears-of-joy',
-  'cat-face-with-wry-smile',
-  'chains',
-  'chart-decreasing',
-  'chart-increasing',
-  'chart-increasing-with-yen',
-  'cheese-wedge',
-  'cherries',
-  'cherry-blossom',
-  'chestnut',
-  'chicken',
-  'children-crossing',
-  'chipmunk',
-  'chocolate-bar',
-  'christmas-tree',
-  'church',
-  'cigarette',
-  'cinema',
-  'circled-m',
-  'circus-tent',
-  'cityscape',
-  'cityscape-at-dusk',
-  'cl-button',
-  'clamp',
-  'clapper-board',
-  'clapping-hands',
-  'clapping-hands-dark-skin-tone',
-  'clapping-hands-light-skin-tone',
-  'clapping-hands-medium-dark-skin-tone',
-  'clapping-hands-medium-light-skin-tone',
-  'clapping-hands-medium-skin-tone',
-  'classical-building',
-  'clinking-beer-mugs',
-  'clinking-glasses',
-  'clipboard',
-  'clockwise-vertical-arrows',
-  'closed-book',
-  'closed-mailbox-with-lowered-flag',
-  'closed-mailbox-with-raised-flag',
-  'closed-umbrella',
-  'cloud',
-  'cloud-with-lightning',
-  'cloud-with-lightning-and-rain',
-  'cloud-with-rain',
-  'cloud-with-snow',
-  'clown-face',
-  'club-suit',
-  'clutch-bag',
-  'cocktail-glass',
-  'coffin',
-  'collision',
-  'comet',
-  'computer-disk',
-  'computer-mouse',
-  'confetti-ball',
-  'confounded-face',
-  'confused-face',
-  'construction',
-  'construction-worker',
-  'construction-worker-dark-skin-tone',
-  'construction-worker-light-skin-tone',
-  'construction-worker-medium-dark-skin-tone',
-  'construction-worker-medium-light-skin-tone',
-  'construction-worker-medium-skin-tone',
-  'control-knobs',
-  'convenience-store',
-  'cooked-rice',
-  'cookie',
-  'cooking',
-  'cool-button',
-  'copyright',
-  'couch-and-lamp',
-  'counterclockwise-arrows-button',
-  'couple-with-heart',
-  'couple-with-heart-man-man',
-  'couple-with-heart-woman-woman',
-  'cow',
-  'cow-face',
-  'cowboy-hat-face',
-  'crab',
-  'crayon',
-  'credit-card',
-  'crescent-moon',
-  'cricket-game',
-  'crocodile',
-  'croissant',
-  'cross-mark',
-  'cross-mark-button',
-  'crossed-fingers',
-  'crossed-fingers-dark-skin-tone',
-  'crossed-fingers-light-skin-tone',
-  'crossed-fingers-medium-dark-skin-tone',
-  'crossed-fingers-medium-light-skin-tone',
-  'crossed-fingers-medium-skin-tone',
-  'crossed-swords',
-  'crown',
-  'crying-cat-face',
-  'crying-face',
-  'crystal-ball',
-  'cucumber',
-  'curly-loop',
-  'currency-exchange',
-  'curry-rice',
-  'custard',
-  'customs',
-  'cyclone',
-  'dagger',
-  'dango',
-  'dark-skin-tone',
-  'dashing-away',
-  'deciduous-tree',
-  'deer',
-  'delivery-truck',
-  'department-store',
-  'derelict-house',
-  'desert',
-  'desert-island',
-  'desktop-computer',
-  'detective',
-  'detective-dark-skin-tone',
-  'detective-light-skin-tone',
-  'detective-medium-dark-skin-tone',
-  'detective-medium-light-skin-tone',
-  'detective-medium-skin-tone',
-  'diamond-suit',
-  'diamond-with-a-dot',
-  'digit-eight',
-  'digit-five',
-  'digit-four',
-  'digit-nine',
-  'digit-one',
-  'digit-seven',
-  'digit-six',
-  'digit-three',
-  'digit-two',
-  'digit-zero',
-  'dim-button',
-  'direct-hit',
-  'disappointed-face',
-  'dizzy',
-  'dizzy-face',
-  'dog',
-  'dog-face',
-  'dollar-banknote',
-  'dolphin',
-  'door',
-  'dotted-six-pointed-star',
-  'double-curly-loop',
-  'double-exclamation-mark',
-  'doughnut',
-  'dove',
-  'down-arrow',
-  'down-left-arrow',
-  'down-right-arrow',
-  'downcast-face-with-sweat',
-  'downwards-button',
-  'dragon',
-  'dragon-face',
-  'dress',
-  'drooling-face',
-  'droplet',
-  'drum',
-  'duck',
-  'dvd',
-  'e-mail',
-  'eagle',
-  'ear',
-  'ear-dark-skin-tone',
-  'ear-light-skin-tone',
-  'ear-medium-dark-skin-tone',
-  'ear-medium-light-skin-tone',
-  'ear-medium-skin-tone',
-  'ear-of-corn',
-  'egg',
-  'eggplant',
-  'eight-oclock',
-  'eight-pointed-star',
-  'eight-spoked-asterisk',
-  'eight-thirty',
-  'eject-button',
-  'electric-plug',
-  'elephant',
-  'eleven-oclock',
-  'eleven-thirty',
-  'end-arrow',
-  'envelope',
-  'envelope-with-arrow',
-  'euro-banknote',
-  'evergreen-tree',
-  'ewe',
-  'exclamation-mark',
-  'exclamation-question-mark',
-  'expressionless-face',
-  'eye',
-  'eye-in-speech-bubble',
-  'eyes',
-  'face-blowing-a-kiss',
-  'face-savoring-food',
-  'face-screaming-in-fear',
-  'face-with-head-bandage',
-  'face-with-medical-mask',
-  'face-with-open-mouth',
-  'face-with-rolling-eyes',
-  'face-with-steam-from-nose',
-  'face-with-tears-of-joy',
-  'face-with-thermometer',
-  'face-with-tongue',
-  'face-without-mouth',
-  'factory',
-  'fallen-leaf',
-  'family',
-  'family-man-man-boy',
-  'family-man-man-boy-boy',
-  'family-man-man-girl',
-  'family-man-man-girl-boy',
-  'family-man-man-girl-girl',
-  'family-man-woman-boy-boy',
-  'family-man-woman-girl',
-  'family-man-woman-girl-boy',
-  'family-man-woman-girl-girl',
-  'family-woman-woman-boy',
-  'family-woman-woman-boy-boy',
-  'family-woman-woman-girl',
-  'family-woman-woman-girl-boy',
-  'family-woman-woman-girl-girl',
-  'fast-down-button',
-  'fast-forward-button',
-  'fast-reverse-button',
-  'fast-up-button',
-  'fax-machine',
-  'fearful-face',
-  'ferris-wheel',
-  'ferry',
-  'field-hockey',
-  'file-cabinet',
-  'file-folder',
-  'film-frames',
-  'film-projector',
-  'fire',
-  'fire-engine',
-  'fireworks',
-  'first-quarter-moon',
-  'first-quarter-moon-face',
-  'fish',
-  'fish-cake-with-swirl',
-  'fishing-pole',
-  'five-oclock',
-  'five-thirty',
-  'flag-england',
-  'flag-for-afghanistan',
-  'flag-for-aland-islands',
-  'flag-for-albania',
-  'flag-for-algeria',
-  'flag-for-american-samoa',
-  'flag-for-andorra',
-  'flag-for-angola',
-  'flag-for-anguilla',
-  'flag-for-antarctica',
-  'flag-for-antigua-and-barbuda',
-  'flag-for-argentina',
-  'flag-for-armenia',
-  'flag-for-aruba',
-  'flag-for-ascension-island',
-  'flag-for-australia',
-  'flag-for-austria',
-  'flag-for-azerbaijan',
-  'flag-for-bahamas',
-  'flag-for-bahrain',
-  'flag-for-bangladesh',
-  'flag-for-barbados',
-  'flag-for-belarus',
-  'flag-for-belgium',
-  'flag-for-belize',
-  'flag-for-benin',
-  'flag-for-bermuda',
-  'flag-for-bhutan',
-  'flag-for-black-flag',
-  'flag-for-bolivia',
-  'flag-for-bosnia-and-herzegovina',
-  'flag-for-botswana',
-  'flag-for-bouvet-island',
-  'flag-for-brazil',
-  'flag-for-british-indian-ocean-territory',
-  'flag-for-british-virgin-islands',
-  'flag-for-brunei',
-  'flag-for-bulgaria',
-  'flag-for-burkina-faso',
-  'flag-for-burundi',
-  'flag-for-cambodia',
-  'flag-for-cameroon',
-  'flag-for-canada',
-  'flag-for-canary-islands',
-  'flag-for-cape-verde',
-  'flag-for-caribbean-netherlands',
-  'flag-for-cayman-islands',
-  'flag-for-central-african-republic',
-  'flag-for-ceuta-and-melilla',
-  'flag-for-chad',
-  'flag-for-chequered-flag',
-  'flag-for-chile',
-  'flag-for-china',
-  'flag-for-christmas-island',
-  'flag-for-clipperton-island',
-  'flag-for-cocos-islands',
-  'flag-for-colombia',
-  'flag-for-comoros',
-  'flag-for-congo-brazzaville',
-  'flag-for-congo-kinshasa',
-  'flag-for-cook-islands',
-  'flag-for-costa-rica',
-  'flag-for-cote-divoire',
-  'flag-for-croatia',
-  'flag-for-crossed-flags',
-  'flag-for-cuba',
-  'flag-for-curacao',
-  'flag-for-cyprus',
-  'flag-for-czechia',
-  'flag-for-denmark',
-  'flag-for-diego-garcia',
-  'flag-for-djibouti',
-  'flag-for-dominica',
-  'flag-for-dominican-republic',
-  'flag-for-ecuador',
-  'flag-for-egypt',
-  'flag-for-el-salvador',
-  'flag-for-equatorial-guinea',
-  'flag-for-eritrea',
-  'flag-for-estonia',
-  'flag-for-ethiopia',
-  'flag-for-european-union',
-  'flag-for-falkland-islands',
-  'flag-for-faroe-islands',
-  'flag-for-fiji',
-  'flag-for-finland',
-  'flag-for-france',
-  'flag-for-french-guiana',
-  'flag-for-french-polynesia',
-  'flag-for-french-southern-territories',
-  'flag-for-gabon',
-  'flag-for-gambia',
-  'flag-for-georgia',
-  'flag-for-germany',
-  'flag-for-ghana',
-  'flag-for-gibraltar',
-  'flag-for-greece',
-  'flag-for-greenland',
-  'flag-for-grenada',
-  'flag-for-guadeloupe',
-  'flag-for-guam',
-  'flag-for-guatemala',
-  'flag-for-guernsey',
-  'flag-for-guinea',
-  'flag-for-guinea-bissau',
-  'flag-for-guyana',
-  'flag-for-haiti',
-  'flag-for-heard-and-mcdonald-islands',
-  'flag-for-honduras',
-  'flag-for-hong-kong-sar-china',
-  'flag-for-hungary',
-  'flag-for-iceland',
-  'flag-for-india',
-  'flag-for-indonesia',
-  'flag-for-iran',
-  'flag-for-iraq',
-  'flag-for-ireland',
-  'flag-for-isle-of-man',
-  'flag-for-israel',
-  'flag-for-italy',
-  'flag-for-jamaica',
-  'flag-for-japan',
-  'flag-for-jersey',
-  'flag-for-jordan',
-  'flag-for-kazakhstan',
-  'flag-for-kenya',
-  'flag-for-kiribati',
-  'flag-for-kosovo',
-  'flag-for-kuwait',
-  'flag-for-kyrgyzstan',
-  'flag-for-laos',
-  'flag-for-latvia',
-  'flag-for-lebanon',
-  'flag-for-lesotho',
-  'flag-for-liberia',
-  'flag-for-libya',
-  'flag-for-liechtenstein',
-  'flag-for-lithuania',
-  'flag-for-luxembourg',
-  'flag-for-macau-sar-china',
-  'flag-for-macedonia',
-  'flag-for-madagascar',
-  'flag-for-malawi',
-  'flag-for-malaysia',
-  'flag-for-maldives',
-  'flag-for-mali',
-  'flag-for-malta',
-  'flag-for-marshall-islands',
-  'flag-for-martinique',
-  'flag-for-mauritania',
-  'flag-for-mauritius',
-  'flag-for-mayotte',
-  'flag-for-mexico',
-  'flag-for-micronesia',
-  'flag-for-moldova',
-  'flag-for-monaco',
-  'flag-for-mongolia',
-  'flag-for-montenegro',
-  'flag-for-montserrat',
-  'flag-for-morocco',
-  'flag-for-mozambique',
-  'flag-for-myanmar',
-  'flag-for-namibia',
-  'flag-for-nauru',
-  'flag-for-nepal',
-  'flag-for-netherlands',
-  'flag-for-new-caledonia',
-  'flag-for-new-zealand',
-  'flag-for-nicaragua',
-  'flag-for-niger',
-  'flag-for-nigeria',
-  'flag-for-niue',
-  'flag-for-norfolk-island',
-  'flag-for-north-korea',
-  'flag-for-northern-mariana-islands',
-  'flag-for-norway',
-  'flag-for-oman',
-  'flag-for-pakistan',
-  'flag-for-palau',
-  'flag-for-palestinian-territories',
-  'flag-for-panama',
-  'flag-for-papua-new-guinea',
-  'flag-for-paraguay',
-  'flag-for-peru',
-  'flag-for-philippines',
-  'flag-for-pitcairn-islands',
-  'flag-for-poland',
-  'flag-for-portugal',
-  'flag-for-puerto-rico',
-  'flag-for-qatar',
-  'flag-for-rainbow-flag',
-  'flag-for-reunion',
-  'flag-for-romania',
-  'flag-for-russia',
-  'flag-for-rwanda',
-  'flag-for-samoa',
-  'flag-for-san-marino',
-  'flag-for-sao-tome-and-principe',
-  'flag-for-saudi-arabia',
-  'flag-for-senegal',
-  'flag-for-serbia',
-  'flag-for-seychelles',
-  'flag-for-sierra-leone',
-  'flag-for-singapore',
-  'flag-for-sint-maarten',
-  'flag-for-slovakia',
-  'flag-for-slovenia',
-  'flag-for-solomon-islands',
-  'flag-for-somalia',
-  'flag-for-south-africa',
-  'flag-for-south-georgia-and-south-sandwich-islands',
-  'flag-for-south-korea',
-  'flag-for-south-sudan',
-  'flag-for-spain',
-  'flag-for-sri-lanka',
-  'flag-for-st-barthelemy',
-  'flag-for-st-helena',
-  'flag-for-st-kitts-and-nevis',
-  'flag-for-st-lucia',
-  'flag-for-st-martin',
-  'flag-for-st-pierre-and-miquelon',
-  'flag-for-st-vincent-and-grenadines',
-  'flag-for-sudan',
-  'flag-for-suriname',
-  'flag-for-svalbard-and-jan-mayen',
-  'flag-for-swaziland',
-  'flag-for-sweden',
-  'flag-for-switzerland',
-  'flag-for-syria',
-  'flag-for-taiwan',
-  'flag-for-tajikistan',
-  'flag-for-tanzania',
-  'flag-for-thailand',
-  'flag-for-timor-leste',
-  'flag-for-togo',
-  'flag-for-tokelau',
-  'flag-for-tonga',
-  'flag-for-triangular-flag',
-  'flag-for-trinidad-and-tobago',
-  'flag-for-tristan-da-cunha',
-  'flag-for-tunisia',
-  'flag-for-turkey',
-  'flag-for-turkmenistan',
-  'flag-for-turks-and-caicos-islands',
-  'flag-for-tuvalu',
-  'flag-for-uganda',
-  'flag-for-ukraine',
-  'flag-for-united-arab-emirates',
-  'flag-for-united-kingdom',
-  'flag-for-united-states',
-  'flag-for-uruguay',
-  'flag-for-us-outlying-islands',
-  'flag-for-us-virgin-islands',
-  'flag-for-uzbekistan',
-  'flag-for-vanuatu',
-  'flag-for-vatican-city',
-  'flag-for-venezuela',
-  'flag-for-vietnam',
-  'flag-for-wallis-and-futuna',
-  'flag-for-western-sahara',
-  'flag-for-white-flag',
-  'flag-for-yemen',
-  'flag-for-zambia',
-  'flag-for-zimbabwe',
-  'flag-in-hole',
-  'flag-scotland',
-  'flashlight',
-  'fleur-de-lis',
-  'flexed-biceps',
-  'flexed-biceps-dark-skin-tone',
-  'flexed-biceps-light-skin-tone',
-  'flexed-biceps-medium-dark-skin-tone',
-  'flexed-biceps-medium-light-skin-tone',
-  'flexed-biceps-medium-skin-tone',
-  'floppy-disk',
-  'flower-playing-cards',
-  'flushed-face',
-  'fog',
-  'foggy',
-  'folded-hands',
-  'folded-hands-dark-skin-tone',
-  'folded-hands-light-skin-tone',
-  'folded-hands-medium-dark-skin-tone',
-  'folded-hands-medium-light-skin-tone',
-  'folded-hands-medium-skin-tone',
-  'footprints',
-  'fork-and-knife',
-  'fork-and-knife-with-plate',
-  'fountain',
-  'fountain-pen',
-  'four-leaf-clover',
-  'four-oclock',
-  'four-thirty',
-  'fox',
-  'framed-picture',
-  'free-button',
-  'french-fries',
-  'fried-shrimp',
-  'frog-face',
-  'front-facing-baby-chick',
-  'frowning-face',
-  'frowning-face-with-open-mouth',
-  'fuel-pump',
-  'full-moon',
-  'full-moon-face',
-  'funeral-urn',
-  'game-die',
-  'gear',
-  'gem-stone',
-  'gemini',
-  'ghost',
-  'girl',
-  'girl-dark-skin-tone',
-  'girl-light-skin-tone',
-  'girl-medium-dark-skin-tone',
-  'girl-medium-light-skin-tone',
-  'girl-medium-skin-tone',
-  'glass-of-milk',
-  'glasses',
-  'globe-showing-americas',
-  'globe-showing-asia-australia',
-  'globe-showing-europe-africa',
-  'globe-with-meridians',
-  'glowing-star',
-  'goal-net',
-  'goat',
-  'goblin',
-  'gorilla',
-  'graduation-cap',
-  'grapes',
-  'green-apple',
-  'green-book',
-  'green-heart',
-  'green-salad',
-  'grimacing-face',
-  'grinning-cat-face',
-  'grinning-cat-face-with-smiling-eyes',
-  'grinning-face',
-  'grinning-face-with-big-eyes',
-  'grinning-face-with-smiling-eyes',
-  'grinning-face-with-sweat',
-  'grinning-squinting-face',
-  'growing-heart',
-  'guard',
-  'guard-dark-skin-tone',
-  'guard-light-skin-tone',
-  'guard-medium-dark-skin-tone',
-  'guard-medium-light-skin-tone',
-  'guard-medium-skin-tone',
-  'guitar',
-  'hamburger',
-  'hammer',
-  'hammer-and-pick',
-  'hammer-and-wrench',
-  'hamster-face',
-  'hand-with-fingers-splayed',
-  'hand-with-fingers-splayed-dark-skin-tone',
-  'hand-with-fingers-splayed-light-skin-tone',
-  'hand-with-fingers-splayed-medium-dark-skin-tone',
-  'hand-with-fingers-splayed-medium-light-skin-tone',
-  'hand-with-fingers-splayed-medium-skin-tone',
-  'handbag',
-  'handshake',
-  'handshake-dark-skin-tone',
-  'handshake-light-skin-tone',
-  'handshake-medium-dark-skin-tone',
-  'handshake-medium-light-skin-tone',
-  'handshake-medium-skin-tone',
-  'hatching-chick',
-  'headphone',
-  'hear-no-evil-monkey',
-  'heart-decoration',
-  'heart-suit',
-  'heart-with-arrow',
-  'heart-with-ribbon',
-  'heavy-check-mark',
-  'heavy-division-sign',
-  'heavy-dollar-sign',
-  'heavy-heart-exclamation',
-  'heavy-large-circle',
-  'heavy-minus-sign',
-  'heavy-multiplication-x',
-  'heavy-plus-sign',
-  'helicopter',
-  'herb',
-  'hibiscus',
-  'high-heeled-shoe',
-  'high-speed-train',
-  'high-voltage',
-  'hole',
-  'honey-pot',
-  'honeybee',
-  'horizontal-traffic-light',
-  'horse',
-  'horse-face',
-  'horse-racing',
-  'horse-racing-dark-skin-tone',
-  'horse-racing-light-skin-tone',
-  'horse-racing-medium-dark-skin-tone',
-  'horse-racing-medium-light-skin-tone',
-  'horse-racing-medium-skin-tone',
-  'hospital',
-  'hot-beverage',
-  'hot-dog',
-  'hot-pepper',
-  'hot-springs',
-  'hotel',
-  'hourglass-done',
-  'hourglass-not-done',
-  'house',
-  'house-with-garden',
-  'houses',
-  'hugging-face',
-  'hundred-points',
-  'hushed-face',
-  'ice-cream',
-  'ice-hockey',
-  'ice-skate',
-  'id-button',
-  'inbox-tray',
-  'incoming-envelope',
-  'index-pointing-up',
-  'index-pointing-up-dark-skin-tone',
-  'index-pointing-up-light-skin-tone',
-  'index-pointing-up-medium-dark-skin-tone',
-  'index-pointing-up-medium-light-skin-tone',
-  'index-pointing-up-medium-skin-tone',
-  'information',
-  'input-latin-letters',
-  'input-latin-lowercase',
-  'input-latin-uppercase',
-  'input-numbers',
-  'input-symbols',
-  'jack-o-lantern',
-  'japanese-acceptable-button',
-  'japanese-application-button',
-  'japanese-bargain-button',
-  'japanese-castle',
-  'japanese-congratulations-button',
-  'japanese-discount-button',
-  'japanese-dolls',
-  'japanese-free-of-charge-button',
-  'japanese-here-button',
-  'japanese-monthly-amount-button',
-  'japanese-no-vacancy-button',
-  'japanese-not-free-of-charge-button',
-  'japanese-open-for-business-button',
-  'japanese-passing-grade-button',
-  'japanese-post-office',
-  'japanese-prohibited-button',
-  'japanese-reserved-button',
-  'japanese-secret-button',
-  'japanese-service-charge-button',
-  'japanese-symbol-for-beginner',
-  'japanese-vacancy-button',
-  'jeans',
-  'joker',
-  'joystick',
-  'kaaba',
-  'key',
-  'keyboard',
-  'keycap-0',
-  'keycap-1',
-  'keycap-10',
-  'keycap-2',
-  'keycap-3',
-  'keycap-4',
-  'keycap-5',
-  'keycap-6',
-  'keycap-7',
-  'keycap-8',
-  'keycap-9',
-  'keycap-asterisk',
-  'keycap-pound',
-  'kick-scooter',
-  'kimono',
-  'kiss',
-  'kiss-man-man',
-  'kiss-mark',
-  'kiss-woman-woman',
-  'kissing-cat-face',
-  'kissing-face',
-  'kissing-face-with-closed-eyes',
-  'kissing-face-with-smiling-eyes',
-  'kitchen-knife',
-  'kiwi-fruit',
-  'koala',
-  'label',
-  'lady-beetle',
-  'laptop-computer',
-  'large-blue-diamond',
-  'large-orange-diamond',
-  'last-quarter-moon',
-  'last-quarter-moon-face',
-  'last-track-button',
-  'latin-cross',
-  'leaf-fluttering-in-wind',
-  'ledger',
-  'left-arrow',
-  'left-arrow-curving-right',
-  'left-facing-fist',
-  'left-facing-fist-dark-skin-tone',
-  'left-facing-fist-light-skin-tone',
-  'left-facing-fist-medium-dark-skin-tone',
-  'left-facing-fist-medium-light-skin-tone',
-  'left-facing-fist-medium-skin-tone',
-  'left-luggage',
-  'left-right-arrow',
-  'left-speech-bubble',
-  'lemon',
-  'leo',
-  'leopard',
-  'letter-a',
-  'letter-b',
-  'letter-c',
-  'letter-d',
-  'letter-e',
-  'letter-f',
-  'letter-g',
-  'letter-h',
-  'letter-i',
-  'letter-j',
-  'letter-k',
-  'letter-l',
-  'letter-m',
-  'letter-n',
-  'letter-o',
-  'letter-p',
-  'letter-q',
-  'letter-r',
-  'letter-s',
-  'letter-t',
-  'letter-u',
-  'letter-v',
-  'letter-w',
-  'letter-x',
-  'letter-y',
-  'letter-z',
-  'level-slider',
-  'libra',
-  'light-bulb',
-  'light-rail',
-  'light-skin-tone',
-  'link',
-  'linked-paperclips',
-  'lion-face',
-  'lipstick',
-  'litter-in-bin-sign',
-  'lizard',
-  'locked',
-  'locked-with-key',
-  'locked-with-pen',
-  'locomotive',
-  'lollipop',
-  'loudly-crying-face',
-  'loudspeaker',
-  'love-hotel',
-  'love-letter',
-  'lying-face',
-  'magnifying-glass-tilted-left',
-  'magnifying-glass-tilted-right',
-  'mahjong-red-dragon',
-  'man',
-  'man-and-woman-holding-hands',
-  'man-dancing',
-  'man-dancing-dark-skin-tone',
-  'man-dancing-light-skin-tone',
-  'man-dancing-medium-dark-skin-tone',
-  'man-dancing-medium-light-skin-tone',
-  'man-dancing-medium-skin-tone',
-  'man-dark-skin-tone',
-  'man-in-suit-levitating',
-  'man-in-tuxedo',
-  'man-in-tuxedo-dark-skin-tone',
-  'man-in-tuxedo-light-skin-tone',
-  'man-in-tuxedo-medium-dark-skin-tone',
-  'man-in-tuxedo-medium-light-skin-tone',
-  'man-in-tuxedo-medium-skin-tone',
-  'man-light-skin-tone',
-  'man-medium-dark-skin-tone',
-  'man-medium-light-skin-tone',
-  'man-medium-skin-tone',
-  'man-with-chinese-cap',
-  'man-with-chinese-cap-dark-skin-tone',
-  'man-with-chinese-cap-light-skin-tone',
-  'man-with-chinese-cap-medium-dark-skin-tone',
-  'man-with-chinese-cap-medium-light-skin-tone',
-  'man-with-chinese-cap-medium-skin-tone',
-  'mans-shoe',
-  'mantelpiece-clock',
-  'map-of-japan',
-  'maple-leaf',
-  'martial-arts-uniform',
-  'meat-on-bone',
-  'medium-dark-skin-tone',
-  'medium-light-skin-tone',
-  'medium-skin-tone',
-  'megaphone',
-  'melon',
-  'memo',
-  'menorah',
-  'mens-room',
-  'metro',
-  'microphone',
-  'microscope',
-  'middle-finger',
-  'middle-finger-dark-skin-tone',
-  'middle-finger-light-skin-tone',
-  'middle-finger-medium-dark-skin-tone',
-  'middle-finger-medium-light-skin-tone',
-  'middle-finger-medium-skin-tone',
-  'military-medal',
-  'milky-way',
-  'minibus',
-  'moai',
-  'mobile-phone',
-  'mobile-phone-off',
-  'mobile-phone-with-arrow',
-  'money-bag',
-  'money-mouth-face',
-  'money-with-wings',
-  'monkey',
-  'monkey-face',
-  'monorail',
-  'moon-viewing-ceremony',
-  'mosque',
-  'motor-boat',
-  'motor-scooter',
-  'motorcycle',
-  'motorway',
-  'mount-fuji',
-  'mountain',
-  'mountain-cableway',
-  'mountain-railway',
-  'mouse',
-  'mouse-face',
-  'mouth',
-  'movie-camera',
-  'mrs-claus',
-  'mrs-claus-dark-skin-tone',
-  'mrs-claus-light-skin-tone',
-  'mrs-claus-medium-dark-skin-tone',
-  'mrs-claus-medium-light-skin-tone',
-  'mrs-claus-medium-skin-tone',
-  'mushroom',
-  'musical-keyboard',
-  'musical-note',
-  'musical-notes',
-  'musical-score',
-  'muted-speaker',
-  'nail-polish',
-  'nail-polish-dark-skin-tone',
-  'nail-polish-light-skin-tone',
-  'nail-polish-medium-dark-skin-tone',
-  'nail-polish-medium-light-skin-tone',
-  'nail-polish-medium-skin-tone',
-  'name-badge',
-  'national-park',
-  'nauseated-face',
-  'necktie',
-  'nerd-face',
-  'neutral-face',
-  'new-button',
-  'new-moon',
-  'new-moon-face',
-  'newspaper',
-  'next-track-button',
-  'ng-button',
-  'night-with-stars',
-  'nine-oclock',
-  'nine-thirty',
-  'no-bicycles',
-  'no-entry',
-  'no-littering',
-  'no-mobile-phones',
-  'no-one-under-eighteen',
-  'no-pedestrians',
-  'no-smoking',
-  'non-potable-water',
-  'nose',
-  'nose-dark-skin-tone',
-  'nose-light-skin-tone',
-  'nose-medium-dark-skin-tone',
-  'nose-medium-light-skin-tone',
-  'nose-medium-skin-tone',
-  'notebook',
-  'notebook-with-decorative-cover',
-  'nut-and-bolt',
-  'o-button',
-  'octopus',
-  'oden',
-  'office-building',
-  'ogre',
-  'oil-drum',
-  'ok-button',
-  'ok-hand',
-  'ok-hand-dark-skin-tone',
-  'ok-hand-light-skin-tone',
-  'ok-hand-medium-dark-skin-tone',
-  'ok-hand-medium-light-skin-tone',
-  'ok-hand-medium-skin-tone',
-  'old-key',
-  'old-man',
-  'old-man-dark-skin-tone',
-  'old-man-light-skin-tone',
-  'old-man-medium-dark-skin-tone',
-  'old-man-medium-light-skin-tone',
-  'old-man-medium-skin-tone',
-  'old-woman',
-  'old-woman-dark-skin-tone',
-  'old-woman-light-skin-tone',
-  'old-woman-medium-dark-skin-tone',
-  'old-woman-medium-light-skin-tone',
-  'old-woman-medium-skin-tone',
-  'om',
-  'on-arrow',
-  'oncoming-automobile',
-  'oncoming-bus',
-  'oncoming-fist',
-  'oncoming-fist-dark-skin-tone',
-  'oncoming-fist-light-skin-tone',
-  'oncoming-fist-medium-dark-skin-tone',
-  'oncoming-fist-medium-light-skin-tone',
-  'oncoming-fist-medium-skin-tone',
-  'oncoming-police-car',
-  'oncoming-taxi',
-  'one-oclock',
-  'one-thirty',
-  'open-book',
-  'open-file-folder',
-  'open-hands',
-  'open-hands-dark-skin-tone',
-  'open-hands-light-skin-tone',
-  'open-hands-medium-dark-skin-tone',
-  'open-hands-medium-light-skin-tone',
-  'open-hands-medium-skin-tone',
-  'open-mailbox-with-lowered-flag',
-  'open-mailbox-with-raised-flag',
-  'ophiuchus',
-  'optical-disk',
-  'orange-book',
-  'orthodox-cross',
-  'outbox-tray',
-  'owl',
-  'ox',
-  'p-button',
-  'package',
-  'page-facing-up',
-  'page-with-curl',
-  'pager',
-  'paintbrush',
-  'palm-tree',
-  'pancakes',
-  'panda-face',
-  'paperclip',
-  'part-alternation-mark',
-  'party-popper',
-  'passenger-ship',
-  'passport-control',
-  'pause-button',
-  'paw-prints',
-  'peace-symbol',
-  'peach',
-  'peanuts',
-  'pear',
-  'pen',
-  'pencil',
-  'penguin',
-  'pensive-face',
-  'people-with-bunny-ears',
-  'people-wrestling',
-  'people-wrestling-dark-skin-tone',
-  'people-wrestling-light-skin-tone',
-  'people-wrestling-medium-dark-skin-tone',
-  'people-wrestling-medium-light-skin-tone',
-  'people-wrestling-medium-skin-tone',
-  'performing-arts',
-  'persevering-face',
-  'person-biking',
-  'person-biking-dark-skin-tone',
-  'person-biking-light-skin-tone',
-  'person-biking-medium-dark-skin-tone',
-  'person-biking-medium-light-skin-tone',
-  'person-biking-medium-skin-tone',
-  'person-bouncing-ball',
-  'person-bouncing-ball-dark-skin-tone',
-  'person-bouncing-ball-light-skin-tone',
-  'person-bouncing-ball-medium-dark-skin-tone',
-  'person-bouncing-ball-medium-light-skin-tone',
-  'person-bouncing-ball-medium-skin-tone',
-  'person-bowing',
-  'person-bowing-dark-skin-tone',
-  'person-bowing-light-skin-tone',
-  'person-bowing-medium-dark-skin-tone',
-  'person-bowing-medium-light-skin-tone',
-  'person-bowing-medium-skin-tone',
-  'person-cartwheeling',
-  'person-cartwheeling-dark-skin-tone',
-  'person-cartwheeling-light-skin-tone',
-  'person-cartwheeling-medium-dark-skin-tone',
-  'person-cartwheeling-medium-light-skin-tone',
-  'person-cartwheeling-medium-skin-tone',
-  'person-facepalming',
-  'person-facepalming-dark-skin-tone',
-  'person-facepalming-light-skin-tone',
-  'person-facepalming-medium-dark-skin-tone',
-  'person-facepalming-medium-light-skin-tone',
-  'person-facepalming-medium-skin-tone',
-  'person-fencing',
-  'person-frowning',
-  'person-frowning-dark-skin-tone',
-  'person-frowning-light-skin-tone',
-  'person-frowning-medium-dark-skin-tone',
-  'person-frowning-medium-light-skin-tone',
-  'person-frowning-medium-skin-tone',
-  'person-gesturing-no',
-  'person-gesturing-no-dark-skin-tone',
-  'person-gesturing-no-light-skin-tone',
-  'person-gesturing-no-medium-dark-skin-tone',
-  'person-gesturing-no-medium-light-skin-tone',
-  'person-gesturing-no-medium-skin-tone',
-  'person-gesturing-ok',
-  'person-gesturing-ok-dark-skin-tone',
-  'person-gesturing-ok-light-skin-tone',
-  'person-gesturing-ok-medium-dark-skin-tone',
-  'person-gesturing-ok-medium-light-skin-tone',
-  'person-gesturing-ok-medium-skin-tone',
-  'person-getting-haircut',
-  'person-getting-haircut-dark-skin-tone',
-  'person-getting-haircut-light-skin-tone',
-  'person-getting-haircut-medium-dark-skin-tone',
-  'person-getting-haircut-medium-light-skin-tone',
-  'person-getting-haircut-medium-skin-tone',
-  'person-getting-massage',
-  'person-getting-massage-dark-skin-tone',
-  'person-getting-massage-light-skin-tone',
-  'person-getting-massage-medium-dark-skin-tone',
-  'person-getting-massage-medium-light-skin-tone',
-  'person-getting-massage-medium-skin-tone',
-  'person-golfing',
-  'person-in-bed',
-  'person-juggling',
-  'person-juggling-dark-skin-tone',
-  'person-juggling-light-skin-tone',
-  'person-juggling-medium-dark-skin-tone',
-  'person-juggling-medium-light-skin-tone',
-  'person-juggling-medium-skin-tone',
-  'person-lifting-weights',
-  'person-lifting-weights-dark-skin-tone',
-  'person-lifting-weights-light-skin-tone',
-  'person-lifting-weights-medium-dark-skin-tone',
-  'person-lifting-weights-medium-light-skin-tone',
-  'person-lifting-weights-medium-skin-tone',
-  'person-mountain-biking',
-  'person-mountain-biking-dark-skin-tone',
-  'person-mountain-biking-light-skin-tone',
-  'person-mountain-biking-medium-dark-skin-tone',
-  'person-mountain-biking-medium-light-skin-tone',
-  'person-mountain-biking-medium-skin-tone',
-  'person-playing-handball',
-  'person-playing-handball-dark-skin-tone',
-  'person-playing-handball-light-skin-tone',
-  'person-playing-handball-medium-dark-skin-tone',
-  'person-playing-handball-medium-light-skin-tone',
-  'person-playing-handball-medium-skin-tone',
-  'person-playing-water-polo',
-  'person-playing-water-polo-dark-skin-tone',
-  'person-playing-water-polo-light-skin-tone',
-  'person-playing-water-polo-medium-dark-skin-tone',
-  'person-playing-water-polo-medium-light-skin-tone',
-  'person-playing-water-polo-medium-skin-tone',
-  'person-pouting',
-  'person-pouting-dark-skin-tone',
-  'person-pouting-light-skin-tone',
-  'person-pouting-medium-dark-skin-tone',
-  'person-pouting-medium-light-skin-tone',
-  'person-pouting-medium-skin-tone',
-  'person-raising-hand',
-  'person-raising-hand-dark-skin-tone',
-  'person-raising-hand-light-skin-tone',
-  'person-raising-hand-medium-dark-skin-tone',
-  'person-raising-hand-medium-light-skin-tone',
-  'person-raising-hand-medium-skin-tone',
-  'person-rowing-boat',
-  'person-rowing-boat-dark-skin-tone',
-  'person-rowing-boat-light-skin-tone',
-  'person-rowing-boat-medium-dark-skin-tone',
-  'person-rowing-boat-medium-light-skin-tone',
-  'person-rowing-boat-medium-skin-tone',
-  'person-running',
-  'person-running-dark-skin-tone',
-  'person-running-light-skin-tone',
-  'person-running-medium-dark-skin-tone',
-  'person-running-medium-light-skin-tone',
-  'person-running-medium-skin-tone',
-  'person-shrugging',
-  'person-shrugging-dark-skin-tone',
-  'person-shrugging-light-skin-tone',
-  'person-shrugging-medium-dark-skin-tone',
-  'person-shrugging-medium-light-skin-tone',
-  'person-shrugging-medium-skin-tone',
-  'person-surfing',
-  'person-surfing-dark-skin-tone',
-  'person-surfing-light-skin-tone',
-  'person-surfing-medium-dark-skin-tone',
-  'person-surfing-medium-light-skin-tone',
-  'person-surfing-medium-skin-tone',
-  'person-swimming',
-  'person-swimming-dark-skin-tone',
-  'person-swimming-light-skin-tone',
-  'person-swimming-medium-dark-skin-tone',
-  'person-swimming-medium-light-skin-tone',
-  'person-swimming-medium-skin-tone',
-  'person-taking-bath',
-  'person-taking-bath-dark-skin-tone',
-  'person-taking-bath-light-skin-tone',
-  'person-taking-bath-medium-dark-skin-tone',
-  'person-taking-bath-medium-light-skin-tone',
-  'person-taking-bath-medium-skin-tone',
-  'person-tipping-hand',
-  'person-tipping-hand-dark-skin-tone',
-  'person-tipping-hand-light-skin-tone',
-  'person-tipping-hand-medium-dark-skin-tone',
-  'person-tipping-hand-medium-light-skin-tone',
-  'person-tipping-hand-medium-skin-tone',
-  'person-walking',
-  'person-walking-dark-skin-tone',
-  'person-walking-light-skin-tone',
-  'person-walking-medium-dark-skin-tone',
-  'person-walking-medium-light-skin-tone',
-  'person-walking-medium-skin-tone',
-  'person-wearing-turban',
-  'person-wearing-turban-dark-skin-tone',
-  'person-wearing-turban-light-skin-tone',
-  'person-wearing-turban-medium-dark-skin-tone',
-  'person-wearing-turban-medium-light-skin-tone',
-  'person-wearing-turban-medium-skin-tone',
-  'pick',
-  'pig',
-  'pig-face',
-  'pig-nose',
-  'pile-of-poo',
-  'pill',
-  'pine-decoration',
-  'pineapple',
-  'ping-pong',
-  'pisces',
-  'pistol',
-  'pizza',
-  'place-of-worship',
-  'play-button',
-  'play-or-pause-button',
-  'police-car',
-  'police-car-light',
-  'police-officer',
-  'police-officer-dark-skin-tone',
-  'police-officer-light-skin-tone',
-  'police-officer-medium-dark-skin-tone',
-  'police-officer-medium-light-skin-tone',
-  'police-officer-medium-skin-tone',
-  'poodle',
-  'pool-8-ball',
-  'popcorn',
-  'post-office',
-  'postal-horn',
-  'postbox',
-  'pot-of-food',
-  'potable-water',
-  'potato',
-  'poultry-leg',
-  'pound-banknote',
-  'pound-symbol',
-  'pouting-cat-face',
-  'pouting-face',
-  'prayer-beads',
-  'pregnant-woman',
-  'pregnant-woman-dark-skin-tone',
-  'pregnant-woman-light-skin-tone',
-  'pregnant-woman-medium-dark-skin-tone',
-  'pregnant-woman-medium-light-skin-tone',
-  'pregnant-woman-medium-skin-tone',
-  'prince',
-  'prince-dark-skin-tone',
-  'prince-light-skin-tone',
-  'prince-medium-dark-skin-tone',
-  'prince-medium-light-skin-tone',
-  'prince-medium-skin-tone',
-  'princess',
-  'princess-dark-skin-tone',
-  'princess-light-skin-tone',
-  'princess-medium-dark-skin-tone',
-  'princess-medium-light-skin-tone',
-  'princess-medium-skin-tone',
-  'printer',
-  'prohibited',
-  'purple-heart',
-  'purse',
-  'pushpin',
-  'question-mark',
-  'rabbit',
-  'rabbit-face',
-  'racing-car',
-  'radio',
-  'radio-button',
-  'radioactive',
-  'railway-car',
-  'railway-track',
-  'rainbow',
-  'raised-back-of-hand',
-  'raised-back-of-hand-dark-skin-tone',
-  'raised-back-of-hand-light-skin-tone',
-  'raised-back-of-hand-medium-dark-skin-tone',
-  'raised-back-of-hand-medium-light-skin-tone',
-  'raised-back-of-hand-medium-skin-tone',
-  'raised-fist',
-  'raised-fist-dark-skin-tone',
-  'raised-fist-light-skin-tone',
-  'raised-fist-medium-dark-skin-tone',
-  'raised-fist-medium-light-skin-tone',
-  'raised-fist-medium-skin-tone',
-  'raised-hand',
-  'raised-hand-dark-skin-tone',
-  'raised-hand-light-skin-tone',
-  'raised-hand-medium-dark-skin-tone',
-  'raised-hand-medium-light-skin-tone',
-  'raised-hand-medium-skin-tone',
-  'raising-hands',
-  'raising-hands-dark-skin-tone',
-  'raising-hands-light-skin-tone',
-  'raising-hands-medium-dark-skin-tone',
-  'raising-hands-medium-light-skin-tone',
-  'raising-hands-medium-skin-tone',
-  'ram',
-  'rat',
-  'record-button',
-  'recycling-symbol',
-  'red-apple',
-  'red-circle',
-  'red-heart',
-  'red-paper-lantern',
-  'red-triangle-pointed-down',
-  'red-triangle-pointed-up',
-  'registered',
-  'relieved-face',
-  'reminder-ribbon',
-  'repeat-button',
-  'repeat-single-button',
-  'rescue-workers-helmet',
-  'restroom',
-  'reverse-button',
-  'revolving-hearts',
-  'rhinoceros',
-  'ribbon',
-  'rice-ball',
-  'rice-cracker',
-  'right-anger-bubble',
-  'right-arrow',
-  'right-arrow-curving-down',
-  'right-arrow-curving-left',
-  'right-arrow-curving-up',
-  'right-facing-fist',
-  'right-facing-fist-dark-skin-tone',
-  'right-facing-fist-light-skin-tone',
-  'right-facing-fist-medium-dark-skin-tone',
-  'right-facing-fist-medium-light-skin-tone',
-  'right-facing-fist-medium-skin-tone',
-  'ring',
-  'roasted-sweet-potato',
-  'robot-face',
-  'rocket',
-  'rolled-up-newspaper',
-  'roller-coaster',
-  'rolling-on-the-floor-laughing',
-  'rooster',
-  'rose',
-  'rosette',
-  'round-pushpin',
-  'rugby-football',
-  'running-shirt',
-  'running-shoe',
-  'sad-but-relieved-face',
-  'sagittarius',
-  'sailboat',
-  'sake',
-  'santa-claus',
-  'santa-claus-dark-skin-tone',
-  'santa-claus-light-skin-tone',
-  'santa-claus-medium-dark-skin-tone',
-  'santa-claus-medium-light-skin-tone',
-  'santa-claus-medium-skin-tone',
-  'satellite',
-  'satellite-antenna',
-  'saxophone',
-  'school',
-  'scissors',
-  'scorpio',
-  'scorpion',
-  'scroll',
-  'seat',
-  'see-no-evil-monkey',
-  'seedling',
-  'selfie',
-  'selfie-dark-skin-tone',
-  'selfie-light-skin-tone',
-  'selfie-medium-dark-skin-tone',
-  'selfie-medium-light-skin-tone',
-  'selfie-medium-skin-tone',
-  'seven-oclock',
-  'seven-thirty',
-  'shallow-pan-of-food',
-  'shamrock',
-  'shark',
-  'shaved-ice',
-  'sheaf-of-rice',
-  'shield',
-  'shinto-shrine',
-  'ship',
-  'shooting-star',
-  'shopping-bags',
-  'shopping-cart',
-  'shortcake',
-  'shower',
-  'shrimp',
-  'shuffle-tracks-button',
-  'sign-of-the-horns',
-  'sign-of-the-horns-dark-skin-tone',
-  'sign-of-the-horns-light-skin-tone',
-  'sign-of-the-horns-medium-dark-skin-tone',
-  'sign-of-the-horns-medium-light-skin-tone',
-  'sign-of-the-horns-medium-skin-tone',
-  'six-oclock',
-  'six-thirty',
-  'skier',
-  'skis',
-  'skull',
-  'skull-and-crossbones',
-  'sleeping-face',
-  'sleepy-face',
-  'slightly-frowning-face',
-  'slightly-smiling-face',
-  'slot-machine',
-  'small-airplane',
-  'small-blue-diamond',
-  'small-orange-diamond',
-  'smiling-cat-face-with-heart-eyes',
-  'smiling-face',
-  'smiling-face-with-halo',
-  'smiling-face-with-heart-eyes',
-  'smiling-face-with-horns',
-  'smiling-face-with-smiling-eyes',
-  'smiling-face-with-sunglasses',
-  'smirking-face',
-  'snail',
-  'snake',
-  'sneezing-face',
-  'snow-capped-mountain',
-  'snowboarder',
-  'snowflake',
-  'snowman',
-  'snowman-without-snow',
-  'soccer-ball',
-  'soft-ice-cream',
-  'soon-arrow',
-  'sos-button',
-  'spade-suit',
-  'spaghetti',
-  'sparkle',
-  'sparkler',
-  'sparkles',
-  'sparkling-heart',
-  'speak-no-evil-monkey',
-  'speaker-high-volume',
-  'speaker-low-volume',
-  'speaker-medium-volume',
-  'speaking-head',
-  'speech-balloon',
-  'speedboat',
-  'spider',
-  'spider-web',
-  'spiral-calendar',
-  'spiral-notepad',
-  'spiral-shell',
-  'spoon',
-  'sport-utility-vehicle',
-  'sports-medal',
-  'spouting-whale',
-  'squid',
-  'squinting-face-with-tongue',
-  'stadium',
-  'star',
-  'star-and-crescent',
-  'star-of-david',
-  'station',
-  'statue-of-liberty',
-  'steaming-bowl',
-  'stop-button',
-  'stop-sign',
-  'stopwatch',
-  'straight-ruler',
-  'strawberry',
-  'studio-microphone',
-  'stuffed-flatbread',
-  'sun',
-  'sun-behind-cloud',
-  'sun-behind-large-cloud',
-  'sun-behind-rain-cloud',
-  'sun-behind-small-cloud',
-  'sun-with-face',
-  'sunflower',
-  'sunglasses',
-  'sunrise',
-  'sunrise-over-mountains',
-  'sunset',
-  'sushi',
-  'suspension-railway',
-  'sweat-droplets',
-  'synagogue',
-  'syringe',
-  't-shirt',
-  'taco',
-  'tanabata-tree',
-  'tangerine',
-  'taurus',
-  'taxi',
-  'teacup-without-handle',
-  'tear-off-calendar',
-  'telephone',
-  'telephone-receiver',
-  'telescope',
-  'television',
-  'ten-oclock',
-  'ten-thirty',
-  'tennis',
-  'tent',
-  'thermometer',
-  'thinking-face',
-  'thought-balloon',
-  'three-oclock',
-  'three-thirty',
-  'thumbs-down',
-  'thumbs-down-dark-skin-tone',
-  'thumbs-down-light-skin-tone',
-  'thumbs-down-medium-dark-skin-tone',
-  'thumbs-down-medium-light-skin-tone',
-  'thumbs-down-medium-skin-tone',
-  'thumbs-up',
-  'thumbs-up-dark-skin-tone',
-  'thumbs-up-light-skin-tone',
-  'thumbs-up-medium-dark-skin-tone',
-  'thumbs-up-medium-light-skin-tone',
-  'thumbs-up-medium-skin-tone',
-  'ticket',
-  'tiger',
-  'tiger-face',
-  'timer-clock',
-  'tired-face',
-  'toilet',
-  'tokyo-tower',
-  'tomato',
-  'tongue',
-  'top-arrow',
-  'top-hat',
-  'tornado',
-  'trackball',
-  'tractor',
-  'trade-mark',
-  'train',
-  'tram',
-  'tram-car',
-  'triangular-ruler',
-  'trident-emblem',
-  'trolleybus',
-  'trophy',
-  'tropical-drink',
-  'tropical-fish',
-  'trumpet',
-  'tulip',
-  'tumbler-glass',
-  'turkey',
-  'turtle',
-  'twelve-oclock',
-  'twelve-thirty',
-  'two-hearts',
-  'two-hump-camel',
-  'two-men-holding-hands',
-  'two-oclock',
-  'two-thirty',
-  'two-women-holding-hands',
-  'umbrella',
-  'umbrella-on-ground',
-  'umbrella-with-rain-drops',
-  'unamused-face',
-  'unicorn-face',
-  'unlocked',
-  'up-arrow',
-  'up-down-arrow',
-  'up-left-arrow',
-  'up-right-arrow',
-  'up-text-button',
-  'upside-down-face',
-  'upwards-button',
-  'vertical-traffic-light',
-  'vibration-mode',
-  'victory-hand',
-  'victory-hand-dark-skin-tone',
-  'victory-hand-light-skin-tone',
-  'victory-hand-medium-dark-skin-tone',
-  'victory-hand-medium-light-skin-tone',
-  'victory-hand-medium-skin-tone',
-  'video-camera',
-  'video-game',
-  'videocassette',
-  'violin',
-  'virgo',
-  'volcano',
-  'volleyball',
-  'vs-button',
-  'vulcan-salute',
-  'vulcan-salute-dark-skin-tone',
-  'vulcan-salute-light-skin-tone',
-  'vulcan-salute-medium-dark-skin-tone',
-  'vulcan-salute-medium-light-skin-tone',
-  'vulcan-salute-medium-skin-tone',
-  'waning-crescent-moon',
-  'waning-gibbous-moon',
-  'warning',
-  'wastebasket',
-  'watch',
-  'water-buffalo',
-  'water-closet',
-  'water-wave',
-  'watermelon',
-  'waving-hand',
-  'waving-hand-dark-skin-tone',
-  'waving-hand-light-skin-tone',
-  'waving-hand-medium-dark-skin-tone',
-  'waving-hand-medium-light-skin-tone',
-  'waving-hand-medium-skin-tone',
-  'wavy-dash',
-  'waxing-crescent-moon',
-  'waxing-gibbous-moon',
-  'weary-cat-face',
-  'weary-face',
-  'wedding',
-  'whale',
-  'wheel-of-dharma',
-  'wheelchair-symbol',
-  'white-circle',
-  'white-exclamation-mark',
-  'white-flower',
-  'white-heavy-check-mark',
-  'white-large-square',
-  'white-medium-small-square',
-  'white-medium-square',
-  'white-question-mark',
-  'white-small-square',
-  'white-square-button',
-  'wilted-flower',
-  'wind-chime',
-  'wind-face',
-  'wine-glass',
-  'winking-face',
-  'winking-face-with-tongue',
-  'wolf',
-  'woman',
-  'woman-dancing',
-  'woman-dancing-dark-skin-tone',
-  'woman-dancing-light-skin-tone',
-  'woman-dancing-medium-dark-skin-tone',
-  'woman-dancing-medium-light-skin-tone',
-  'woman-dancing-medium-skin-tone',
-  'woman-dark-skin-tone',
-  'woman-light-skin-tone',
-  'woman-medium-dark-skin-tone',
-  'woman-medium-light-skin-tone',
-  'woman-medium-skin-tone',
-  'womans-boot',
-  'womans-clothes',
-  'womans-hat',
-  'womans-sandal',
-  'womens-room',
-  'world-map',
-  'worried-face',
-  'wrapped-gift',
-  'wrench',
-  'writing-hand',
-  'writing-hand-dark-skin-tone',
-  'writing-hand-light-skin-tone',
-  'writing-hand-medium-dark-skin-tone',
-  'writing-hand-medium-light-skin-tone',
-  'writing-hand-medium-skin-tone',
-  'yellow-heart',
-  'yen-banknote',
-  'yin-yang',
-  'zipper-mouth-face',
-  'zzz',
-]
-
 let toIndex = $ref(60)
+
 const filteredIcons = computed(() => {
-  return icons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex)
+  return emojiIcons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex)
 })
 
 const load = () => {
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 1b437ee998..5133fa422e 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -74,3 +74,1840 @@ export const getMdiIcon = (type: string): any => {
       return MdiAccountGroup
   }
 }
+
+export const emojiIcons = [
+  '1st-place-medal',
+  '2nd-place-medal',
+  '3rd-place-medal',
+  'a-button',
+  'ab-button',
+  'admission-tickets',
+  'aerial-tramway',
+  'airplane',
+  'airplane-arrival',
+  'airplane-departure',
+  'alarm-clock',
+  'alembic',
+  'alien',
+  'alien-monster',
+  'ambulance',
+  'american-football',
+  'amphora',
+  'anchor',
+  'anger-symbol',
+  'angry-face',
+  'angry-face-with-horns',
+  'anguished-face',
+  'ant',
+  'antenna-bars',
+  'anxious-face-with-sweat',
+  'aquarius',
+  'aries',
+  'articulated-lorry',
+  'artist-palette',
+  'asterisk',
+  'astonished-face',
+  'atm-sign',
+  'atom-symbol',
+  'automobile',
+  'avocado',
+  'b-button',
+  'baby',
+  'baby-angel',
+  'baby-angel-dark-skin-tone',
+  'baby-angel-light-skin-tone',
+  'baby-angel-medium-dark-skin-tone',
+  'baby-angel-medium-light-skin-tone',
+  'baby-angel-medium-skin-tone',
+  'baby-bottle',
+  'baby-chick',
+  'baby-dark-skin-tone',
+  'baby-light-skin-tone',
+  'baby-medium-dark-skin-tone',
+  'baby-medium-light-skin-tone',
+  'baby-medium-skin-tone',
+  'baby-symbol',
+  'back-arrow',
+  'backhand-index-pointing-down',
+  'backhand-index-pointing-down-dark-skin-tone',
+  'backhand-index-pointing-down-light-skin-tone',
+  'backhand-index-pointing-down-medium-dark-skin-tone',
+  'backhand-index-pointing-down-medium-light-skin-tone',
+  'backhand-index-pointing-down-medium-skin-tone',
+  'backhand-index-pointing-left',
+  'backhand-index-pointing-left-dark-skin-tone',
+  'backhand-index-pointing-left-light-skin-tone',
+  'backhand-index-pointing-left-medium-dark-skin-tone',
+  'backhand-index-pointing-left-medium-light-skin-tone',
+  'backhand-index-pointing-left-medium-skin-tone',
+  'backhand-index-pointing-right',
+  'backhand-index-pointing-right-dark-skin-tone',
+  'backhand-index-pointing-right-light-skin-tone',
+  'backhand-index-pointing-right-medium-dark-skin-tone',
+  'backhand-index-pointing-right-medium-light-skin-tone',
+  'backhand-index-pointing-right-medium-skin-tone',
+  'backhand-index-pointing-up',
+  'backhand-index-pointing-up-dark-skin-tone',
+  'backhand-index-pointing-up-light-skin-tone',
+  'backhand-index-pointing-up-medium-dark-skin-tone',
+  'backhand-index-pointing-up-medium-light-skin-tone',
+  'backhand-index-pointing-up-medium-skin-tone',
+  'backpack',
+  'bacon',
+  'badminton',
+  'baggage-claim',
+  'baguette-bread',
+  'balance-scale',
+  'balloon',
+  'ballot-box-with-ballot',
+  'ballot-box-with-check',
+  'banana',
+  'bank',
+  'bar-chart',
+  'barber-pole',
+  'baseball',
+  'basketball',
+  'bat',
+  'bathtub',
+  'battery',
+  'beach-with-umbrella',
+  'beaming-face-with-smiling-eyes',
+  'bear-face',
+  'beating-heart',
+  'bed',
+  'beer-mug',
+  'bell',
+  'bell-with-slash',
+  'bellhop-bell',
+  'bento-box',
+  'bicycle',
+  'bikini',
+  'biohazard',
+  'bird',
+  'birthday-cake',
+  'black-circle',
+  'black-heart',
+  'black-large-square',
+  'black-medium-small-square',
+  'black-medium-square',
+  'black-nib',
+  'black-small-square',
+  'black-square-button',
+  'blond-haired-person',
+  'blond-haired-person-dark-skin-tone',
+  'blond-haired-person-light-skin-tone',
+  'blond-haired-person-medium-dark-skin-tone',
+  'blond-haired-person-medium-light-skin-tone',
+  'blond-haired-person-medium-skin-tone',
+  'blossom',
+  'blowfish',
+  'blue-book',
+  'blue-circle',
+  'blue-heart',
+  'boar',
+  'bomb',
+  'bookmark',
+  'bookmark-tabs',
+  'books',
+  'bottle-with-popping-cork',
+  'bouquet',
+  'bow-and-arrow',
+  'bowling',
+  'boxing-glove',
+  'boy',
+  'boy-dark-skin-tone',
+  'boy-light-skin-tone',
+  'boy-medium-dark-skin-tone',
+  'boy-medium-light-skin-tone',
+  'boy-medium-skin-tone',
+  'bread',
+  'bride-with-veil',
+  'bride-with-veil-dark-skin-tone',
+  'bride-with-veil-light-skin-tone',
+  'bride-with-veil-medium-dark-skin-tone',
+  'bride-with-veil-medium-light-skin-tone',
+  'bride-with-veil-medium-skin-tone',
+  'bridge-at-night',
+  'briefcase',
+  'bright-button',
+  'broken-heart',
+  'bug',
+  'building-construction',
+  'bullet-train',
+  'burrito',
+  'bus',
+  'bus-stop',
+  'bust-in-silhouette',
+  'busts-in-silhouette',
+  'butterfly',
+  'cactus',
+  'calendar',
+  'call-me-hand',
+  'call-me-hand-dark-skin-tone',
+  'call-me-hand-light-skin-tone',
+  'call-me-hand-medium-dark-skin-tone',
+  'call-me-hand-medium-light-skin-tone',
+  'call-me-hand-medium-skin-tone',
+  'camel',
+  'camera',
+  'camera-with-flash',
+  'camping',
+  'cancer',
+  'candle',
+  'candy',
+  'canoe',
+  'capricorn',
+  'card-file-box',
+  'card-index',
+  'card-index-dividers',
+  'carousel-horse',
+  'carp-streamer',
+  'carrot',
+  'castle',
+  'cat',
+  'cat-face',
+  'cat-face-with-tears-of-joy',
+  'cat-face-with-wry-smile',
+  'chains',
+  'chart-decreasing',
+  'chart-increasing',
+  'chart-increasing-with-yen',
+  'cheese-wedge',
+  'cherries',
+  'cherry-blossom',
+  'chestnut',
+  'chicken',
+  'children-crossing',
+  'chipmunk',
+  'chocolate-bar',
+  'christmas-tree',
+  'church',
+  'cigarette',
+  'cinema',
+  'circled-m',
+  'circus-tent',
+  'cityscape',
+  'cityscape-at-dusk',
+  'cl-button',
+  'clamp',
+  'clapper-board',
+  'clapping-hands',
+  'clapping-hands-dark-skin-tone',
+  'clapping-hands-light-skin-tone',
+  'clapping-hands-medium-dark-skin-tone',
+  'clapping-hands-medium-light-skin-tone',
+  'clapping-hands-medium-skin-tone',
+  'classical-building',
+  'clinking-beer-mugs',
+  'clinking-glasses',
+  'clipboard',
+  'clockwise-vertical-arrows',
+  'closed-book',
+  'closed-mailbox-with-lowered-flag',
+  'closed-mailbox-with-raised-flag',
+  'closed-umbrella',
+  'cloud',
+  'cloud-with-lightning',
+  'cloud-with-lightning-and-rain',
+  'cloud-with-rain',
+  'cloud-with-snow',
+  'clown-face',
+  'club-suit',
+  'clutch-bag',
+  'cocktail-glass',
+  'coffin',
+  'collision',
+  'comet',
+  'computer-disk',
+  'computer-mouse',
+  'confetti-ball',
+  'confounded-face',
+  'confused-face',
+  'construction',
+  'construction-worker',
+  'construction-worker-dark-skin-tone',
+  'construction-worker-light-skin-tone',
+  'construction-worker-medium-dark-skin-tone',
+  'construction-worker-medium-light-skin-tone',
+  'construction-worker-medium-skin-tone',
+  'control-knobs',
+  'convenience-store',
+  'cooked-rice',
+  'cookie',
+  'cooking',
+  'cool-button',
+  'copyright',
+  'couch-and-lamp',
+  'counterclockwise-arrows-button',
+  'couple-with-heart',
+  'couple-with-heart-man-man',
+  'couple-with-heart-woman-woman',
+  'cow',
+  'cow-face',
+  'cowboy-hat-face',
+  'crab',
+  'crayon',
+  'credit-card',
+  'crescent-moon',
+  'cricket-game',
+  'crocodile',
+  'croissant',
+  'cross-mark',
+  'cross-mark-button',
+  'crossed-fingers',
+  'crossed-fingers-dark-skin-tone',
+  'crossed-fingers-light-skin-tone',
+  'crossed-fingers-medium-dark-skin-tone',
+  'crossed-fingers-medium-light-skin-tone',
+  'crossed-fingers-medium-skin-tone',
+  'crossed-swords',
+  'crown',
+  'crying-cat-face',
+  'crying-face',
+  'crystal-ball',
+  'cucumber',
+  'curly-loop',
+  'currency-exchange',
+  'curry-rice',
+  'custard',
+  'customs',
+  'cyclone',
+  'dagger',
+  'dango',
+  'dark-skin-tone',
+  'dashing-away',
+  'deciduous-tree',
+  'deer',
+  'delivery-truck',
+  'department-store',
+  'derelict-house',
+  'desert',
+  'desert-island',
+  'desktop-computer',
+  'detective',
+  'detective-dark-skin-tone',
+  'detective-light-skin-tone',
+  'detective-medium-dark-skin-tone',
+  'detective-medium-light-skin-tone',
+  'detective-medium-skin-tone',
+  'diamond-suit',
+  'diamond-with-a-dot',
+  'digit-eight',
+  'digit-five',
+  'digit-four',
+  'digit-nine',
+  'digit-one',
+  'digit-seven',
+  'digit-six',
+  'digit-three',
+  'digit-two',
+  'digit-zero',
+  'dim-button',
+  'direct-hit',
+  'disappointed-face',
+  'dizzy',
+  'dizzy-face',
+  'dog',
+  'dog-face',
+  'dollar-banknote',
+  'dolphin',
+  'door',
+  'dotted-six-pointed-star',
+  'double-curly-loop',
+  'double-exclamation-mark',
+  'doughnut',
+  'dove',
+  'down-arrow',
+  'down-left-arrow',
+  'down-right-arrow',
+  'downcast-face-with-sweat',
+  'downwards-button',
+  'dragon',
+  'dragon-face',
+  'dress',
+  'drooling-face',
+  'droplet',
+  'drum',
+  'duck',
+  'dvd',
+  'e-mail',
+  'eagle',
+  'ear',
+  'ear-dark-skin-tone',
+  'ear-light-skin-tone',
+  'ear-medium-dark-skin-tone',
+  'ear-medium-light-skin-tone',
+  'ear-medium-skin-tone',
+  'ear-of-corn',
+  'egg',
+  'eggplant',
+  'eight-oclock',
+  'eight-pointed-star',
+  'eight-spoked-asterisk',
+  'eight-thirty',
+  'eject-button',
+  'electric-plug',
+  'elephant',
+  'eleven-oclock',
+  'eleven-thirty',
+  'end-arrow',
+  'envelope',
+  'envelope-with-arrow',
+  'euro-banknote',
+  'evergreen-tree',
+  'ewe',
+  'exclamation-mark',
+  'exclamation-question-mark',
+  'expressionless-face',
+  'eye',
+  'eye-in-speech-bubble',
+  'eyes',
+  'face-blowing-a-kiss',
+  'face-savoring-food',
+  'face-screaming-in-fear',
+  'face-with-head-bandage',
+  'face-with-medical-mask',
+  'face-with-open-mouth',
+  'face-with-rolling-eyes',
+  'face-with-steam-from-nose',
+  'face-with-tears-of-joy',
+  'face-with-thermometer',
+  'face-with-tongue',
+  'face-without-mouth',
+  'factory',
+  'fallen-leaf',
+  'family',
+  'family-man-man-boy',
+  'family-man-man-boy-boy',
+  'family-man-man-girl',
+  'family-man-man-girl-boy',
+  'family-man-man-girl-girl',
+  'family-man-woman-boy-boy',
+  'family-man-woman-girl',
+  'family-man-woman-girl-boy',
+  'family-man-woman-girl-girl',
+  'family-woman-woman-boy',
+  'family-woman-woman-boy-boy',
+  'family-woman-woman-girl',
+  'family-woman-woman-girl-boy',
+  'family-woman-woman-girl-girl',
+  'fast-down-button',
+  'fast-forward-button',
+  'fast-reverse-button',
+  'fast-up-button',
+  'fax-machine',
+  'fearful-face',
+  'ferris-wheel',
+  'ferry',
+  'field-hockey',
+  'file-cabinet',
+  'file-folder',
+  'film-frames',
+  'film-projector',
+  'fire',
+  'fire-engine',
+  'fireworks',
+  'first-quarter-moon',
+  'first-quarter-moon-face',
+  'fish',
+  'fish-cake-with-swirl',
+  'fishing-pole',
+  'five-oclock',
+  'five-thirty',
+  'flag-england',
+  'flag-for-afghanistan',
+  'flag-for-aland-islands',
+  'flag-for-albania',
+  'flag-for-algeria',
+  'flag-for-american-samoa',
+  'flag-for-andorra',
+  'flag-for-angola',
+  'flag-for-anguilla',
+  'flag-for-antarctica',
+  'flag-for-antigua-and-barbuda',
+  'flag-for-argentina',
+  'flag-for-armenia',
+  'flag-for-aruba',
+  'flag-for-ascension-island',
+  'flag-for-australia',
+  'flag-for-austria',
+  'flag-for-azerbaijan',
+  'flag-for-bahamas',
+  'flag-for-bahrain',
+  'flag-for-bangladesh',
+  'flag-for-barbados',
+  'flag-for-belarus',
+  'flag-for-belgium',
+  'flag-for-belize',
+  'flag-for-benin',
+  'flag-for-bermuda',
+  'flag-for-bhutan',
+  'flag-for-black-flag',
+  'flag-for-bolivia',
+  'flag-for-bosnia-and-herzegovina',
+  'flag-for-botswana',
+  'flag-for-bouvet-island',
+  'flag-for-brazil',
+  'flag-for-british-indian-ocean-territory',
+  'flag-for-british-virgin-islands',
+  'flag-for-brunei',
+  'flag-for-bulgaria',
+  'flag-for-burkina-faso',
+  'flag-for-burundi',
+  'flag-for-cambodia',
+  'flag-for-cameroon',
+  'flag-for-canada',
+  'flag-for-canary-islands',
+  'flag-for-cape-verde',
+  'flag-for-caribbean-netherlands',
+  'flag-for-cayman-islands',
+  'flag-for-central-african-republic',
+  'flag-for-ceuta-and-melilla',
+  'flag-for-chad',
+  'flag-for-chequered-flag',
+  'flag-for-chile',
+  'flag-for-china',
+  'flag-for-christmas-island',
+  'flag-for-clipperton-island',
+  'flag-for-cocos-islands',
+  'flag-for-colombia',
+  'flag-for-comoros',
+  'flag-for-congo-brazzaville',
+  'flag-for-congo-kinshasa',
+  'flag-for-cook-islands',
+  'flag-for-costa-rica',
+  'flag-for-cote-divoire',
+  'flag-for-croatia',
+  'flag-for-crossed-flags',
+  'flag-for-cuba',
+  'flag-for-curacao',
+  'flag-for-cyprus',
+  'flag-for-czechia',
+  'flag-for-denmark',
+  'flag-for-diego-garcia',
+  'flag-for-djibouti',
+  'flag-for-dominica',
+  'flag-for-dominican-republic',
+  'flag-for-ecuador',
+  'flag-for-egypt',
+  'flag-for-el-salvador',
+  'flag-for-equatorial-guinea',
+  'flag-for-eritrea',
+  'flag-for-estonia',
+  'flag-for-ethiopia',
+  'flag-for-european-union',
+  'flag-for-falkland-islands',
+  'flag-for-faroe-islands',
+  'flag-for-fiji',
+  'flag-for-finland',
+  'flag-for-france',
+  'flag-for-french-guiana',
+  'flag-for-french-polynesia',
+  'flag-for-french-southern-territories',
+  'flag-for-gabon',
+  'flag-for-gambia',
+  'flag-for-georgia',
+  'flag-for-germany',
+  'flag-for-ghana',
+  'flag-for-gibraltar',
+  'flag-for-greece',
+  'flag-for-greenland',
+  'flag-for-grenada',
+  'flag-for-guadeloupe',
+  'flag-for-guam',
+  'flag-for-guatemala',
+  'flag-for-guernsey',
+  'flag-for-guinea',
+  'flag-for-guinea-bissau',
+  'flag-for-guyana',
+  'flag-for-haiti',
+  'flag-for-heard-and-mcdonald-islands',
+  'flag-for-honduras',
+  'flag-for-hong-kong-sar-china',
+  'flag-for-hungary',
+  'flag-for-iceland',
+  'flag-for-india',
+  'flag-for-indonesia',
+  'flag-for-iran',
+  'flag-for-iraq',
+  'flag-for-ireland',
+  'flag-for-isle-of-man',
+  'flag-for-israel',
+  'flag-for-italy',
+  'flag-for-jamaica',
+  'flag-for-japan',
+  'flag-for-jersey',
+  'flag-for-jordan',
+  'flag-for-kazakhstan',
+  'flag-for-kenya',
+  'flag-for-kiribati',
+  'flag-for-kosovo',
+  'flag-for-kuwait',
+  'flag-for-kyrgyzstan',
+  'flag-for-laos',
+  'flag-for-latvia',
+  'flag-for-lebanon',
+  'flag-for-lesotho',
+  'flag-for-liberia',
+  'flag-for-libya',
+  'flag-for-liechtenstein',
+  'flag-for-lithuania',
+  'flag-for-luxembourg',
+  'flag-for-macau-sar-china',
+  'flag-for-macedonia',
+  'flag-for-madagascar',
+  'flag-for-malawi',
+  'flag-for-malaysia',
+  'flag-for-maldives',
+  'flag-for-mali',
+  'flag-for-malta',
+  'flag-for-marshall-islands',
+  'flag-for-martinique',
+  'flag-for-mauritania',
+  'flag-for-mauritius',
+  'flag-for-mayotte',
+  'flag-for-mexico',
+  'flag-for-micronesia',
+  'flag-for-moldova',
+  'flag-for-monaco',
+  'flag-for-mongolia',
+  'flag-for-montenegro',
+  'flag-for-montserrat',
+  'flag-for-morocco',
+  'flag-for-mozambique',
+  'flag-for-myanmar',
+  'flag-for-namibia',
+  'flag-for-nauru',
+  'flag-for-nepal',
+  'flag-for-netherlands',
+  'flag-for-new-caledonia',
+  'flag-for-new-zealand',
+  'flag-for-nicaragua',
+  'flag-for-niger',
+  'flag-for-nigeria',
+  'flag-for-niue',
+  'flag-for-norfolk-island',
+  'flag-for-north-korea',
+  'flag-for-northern-mariana-islands',
+  'flag-for-norway',
+  'flag-for-oman',
+  'flag-for-pakistan',
+  'flag-for-palau',
+  'flag-for-palestinian-territories',
+  'flag-for-panama',
+  'flag-for-papua-new-guinea',
+  'flag-for-paraguay',
+  'flag-for-peru',
+  'flag-for-philippines',
+  'flag-for-pitcairn-islands',
+  'flag-for-poland',
+  'flag-for-portugal',
+  'flag-for-puerto-rico',
+  'flag-for-qatar',
+  'flag-for-rainbow-flag',
+  'flag-for-reunion',
+  'flag-for-romania',
+  'flag-for-russia',
+  'flag-for-rwanda',
+  'flag-for-samoa',
+  'flag-for-san-marino',
+  'flag-for-sao-tome-and-principe',
+  'flag-for-saudi-arabia',
+  'flag-for-senegal',
+  'flag-for-serbia',
+  'flag-for-seychelles',
+  'flag-for-sierra-leone',
+  'flag-for-singapore',
+  'flag-for-sint-maarten',
+  'flag-for-slovakia',
+  'flag-for-slovenia',
+  'flag-for-solomon-islands',
+  'flag-for-somalia',
+  'flag-for-south-africa',
+  'flag-for-south-georgia-and-south-sandwich-islands',
+  'flag-for-south-korea',
+  'flag-for-south-sudan',
+  'flag-for-spain',
+  'flag-for-sri-lanka',
+  'flag-for-st-barthelemy',
+  'flag-for-st-helena',
+  'flag-for-st-kitts-and-nevis',
+  'flag-for-st-lucia',
+  'flag-for-st-martin',
+  'flag-for-st-pierre-and-miquelon',
+  'flag-for-st-vincent-and-grenadines',
+  'flag-for-sudan',
+  'flag-for-suriname',
+  'flag-for-svalbard-and-jan-mayen',
+  'flag-for-swaziland',
+  'flag-for-sweden',
+  'flag-for-switzerland',
+  'flag-for-syria',
+  'flag-for-taiwan',
+  'flag-for-tajikistan',
+  'flag-for-tanzania',
+  'flag-for-thailand',
+  'flag-for-timor-leste',
+  'flag-for-togo',
+  'flag-for-tokelau',
+  'flag-for-tonga',
+  'flag-for-triangular-flag',
+  'flag-for-trinidad-and-tobago',
+  'flag-for-tristan-da-cunha',
+  'flag-for-tunisia',
+  'flag-for-turkey',
+  'flag-for-turkmenistan',
+  'flag-for-turks-and-caicos-islands',
+  'flag-for-tuvalu',
+  'flag-for-uganda',
+  'flag-for-ukraine',
+  'flag-for-united-arab-emirates',
+  'flag-for-united-kingdom',
+  'flag-for-united-states',
+  'flag-for-uruguay',
+  'flag-for-us-outlying-islands',
+  'flag-for-us-virgin-islands',
+  'flag-for-uzbekistan',
+  'flag-for-vanuatu',
+  'flag-for-vatican-city',
+  'flag-for-venezuela',
+  'flag-for-vietnam',
+  'flag-for-wallis-and-futuna',
+  'flag-for-western-sahara',
+  'flag-for-white-flag',
+  'flag-for-yemen',
+  'flag-for-zambia',
+  'flag-for-zimbabwe',
+  'flag-in-hole',
+  'flag-scotland',
+  'flashlight',
+  'fleur-de-lis',
+  'flexed-biceps',
+  'flexed-biceps-dark-skin-tone',
+  'flexed-biceps-light-skin-tone',
+  'flexed-biceps-medium-dark-skin-tone',
+  'flexed-biceps-medium-light-skin-tone',
+  'flexed-biceps-medium-skin-tone',
+  'floppy-disk',
+  'flower-playing-cards',
+  'flushed-face',
+  'fog',
+  'foggy',
+  'folded-hands',
+  'folded-hands-dark-skin-tone',
+  'folded-hands-light-skin-tone',
+  'folded-hands-medium-dark-skin-tone',
+  'folded-hands-medium-light-skin-tone',
+  'folded-hands-medium-skin-tone',
+  'footprints',
+  'fork-and-knife',
+  'fork-and-knife-with-plate',
+  'fountain',
+  'fountain-pen',
+  'four-leaf-clover',
+  'four-oclock',
+  'four-thirty',
+  'fox',
+  'framed-picture',
+  'free-button',
+  'french-fries',
+  'fried-shrimp',
+  'frog-face',
+  'front-facing-baby-chick',
+  'frowning-face',
+  'frowning-face-with-open-mouth',
+  'fuel-pump',
+  'full-moon',
+  'full-moon-face',
+  'funeral-urn',
+  'game-die',
+  'gear',
+  'gem-stone',
+  'gemini',
+  'ghost',
+  'girl',
+  'girl-dark-skin-tone',
+  'girl-light-skin-tone',
+  'girl-medium-dark-skin-tone',
+  'girl-medium-light-skin-tone',
+  'girl-medium-skin-tone',
+  'glass-of-milk',
+  'glasses',
+  'globe-showing-americas',
+  'globe-showing-asia-australia',
+  'globe-showing-europe-africa',
+  'globe-with-meridians',
+  'glowing-star',
+  'goal-net',
+  'goat',
+  'goblin',
+  'gorilla',
+  'graduation-cap',
+  'grapes',
+  'green-apple',
+  'green-book',
+  'green-heart',
+  'green-salad',
+  'grimacing-face',
+  'grinning-cat-face',
+  'grinning-cat-face-with-smiling-eyes',
+  'grinning-face',
+  'grinning-face-with-big-eyes',
+  'grinning-face-with-smiling-eyes',
+  'grinning-face-with-sweat',
+  'grinning-squinting-face',
+  'growing-heart',
+  'guard',
+  'guard-dark-skin-tone',
+  'guard-light-skin-tone',
+  'guard-medium-dark-skin-tone',
+  'guard-medium-light-skin-tone',
+  'guard-medium-skin-tone',
+  'guitar',
+  'hamburger',
+  'hammer',
+  'hammer-and-pick',
+  'hammer-and-wrench',
+  'hamster-face',
+  'hand-with-fingers-splayed',
+  'hand-with-fingers-splayed-dark-skin-tone',
+  'hand-with-fingers-splayed-light-skin-tone',
+  'hand-with-fingers-splayed-medium-dark-skin-tone',
+  'hand-with-fingers-splayed-medium-light-skin-tone',
+  'hand-with-fingers-splayed-medium-skin-tone',
+  'handbag',
+  'handshake',
+  'handshake-dark-skin-tone',
+  'handshake-light-skin-tone',
+  'handshake-medium-dark-skin-tone',
+  'handshake-medium-light-skin-tone',
+  'handshake-medium-skin-tone',
+  'hatching-chick',
+  'headphone',
+  'hear-no-evil-monkey',
+  'heart-decoration',
+  'heart-suit',
+  'heart-with-arrow',
+  'heart-with-ribbon',
+  'heavy-check-mark',
+  'heavy-division-sign',
+  'heavy-dollar-sign',
+  'heavy-heart-exclamation',
+  'heavy-large-circle',
+  'heavy-minus-sign',
+  'heavy-multiplication-x',
+  'heavy-plus-sign',
+  'helicopter',
+  'herb',
+  'hibiscus',
+  'high-heeled-shoe',
+  'high-speed-train',
+  'high-voltage',
+  'hole',
+  'honey-pot',
+  'honeybee',
+  'horizontal-traffic-light',
+  'horse',
+  'horse-face',
+  'horse-racing',
+  'horse-racing-dark-skin-tone',
+  'horse-racing-light-skin-tone',
+  'horse-racing-medium-dark-skin-tone',
+  'horse-racing-medium-light-skin-tone',
+  'horse-racing-medium-skin-tone',
+  'hospital',
+  'hot-beverage',
+  'hot-dog',
+  'hot-pepper',
+  'hot-springs',
+  'hotel',
+  'hourglass-done',
+  'hourglass-not-done',
+  'house',
+  'house-with-garden',
+  'houses',
+  'hugging-face',
+  'hundred-points',
+  'hushed-face',
+  'ice-cream',
+  'ice-hockey',
+  'ice-skate',
+  'id-button',
+  'inbox-tray',
+  'incoming-envelope',
+  'index-pointing-up',
+  'index-pointing-up-dark-skin-tone',
+  'index-pointing-up-light-skin-tone',
+  'index-pointing-up-medium-dark-skin-tone',
+  'index-pointing-up-medium-light-skin-tone',
+  'index-pointing-up-medium-skin-tone',
+  'information',
+  'input-latin-letters',
+  'input-latin-lowercase',
+  'input-latin-uppercase',
+  'input-numbers',
+  'input-symbols',
+  'jack-o-lantern',
+  'japanese-acceptable-button',
+  'japanese-application-button',
+  'japanese-bargain-button',
+  'japanese-castle',
+  'japanese-congratulations-button',
+  'japanese-discount-button',
+  'japanese-dolls',
+  'japanese-free-of-charge-button',
+  'japanese-here-button',
+  'japanese-monthly-amount-button',
+  'japanese-no-vacancy-button',
+  'japanese-not-free-of-charge-button',
+  'japanese-open-for-business-button',
+  'japanese-passing-grade-button',
+  'japanese-post-office',
+  'japanese-prohibited-button',
+  'japanese-reserved-button',
+  'japanese-secret-button',
+  'japanese-service-charge-button',
+  'japanese-symbol-for-beginner',
+  'japanese-vacancy-button',
+  'jeans',
+  'joker',
+  'joystick',
+  'kaaba',
+  'key',
+  'keyboard',
+  'keycap-0',
+  'keycap-1',
+  'keycap-10',
+  'keycap-2',
+  'keycap-3',
+  'keycap-4',
+  'keycap-5',
+  'keycap-6',
+  'keycap-7',
+  'keycap-8',
+  'keycap-9',
+  'keycap-asterisk',
+  'keycap-pound',
+  'kick-scooter',
+  'kimono',
+  'kiss',
+  'kiss-man-man',
+  'kiss-mark',
+  'kiss-woman-woman',
+  'kissing-cat-face',
+  'kissing-face',
+  'kissing-face-with-closed-eyes',
+  'kissing-face-with-smiling-eyes',
+  'kitchen-knife',
+  'kiwi-fruit',
+  'koala',
+  'label',
+  'lady-beetle',
+  'laptop-computer',
+  'large-blue-diamond',
+  'large-orange-diamond',
+  'last-quarter-moon',
+  'last-quarter-moon-face',
+  'last-track-button',
+  'latin-cross',
+  'leaf-fluttering-in-wind',
+  'ledger',
+  'left-arrow',
+  'left-arrow-curving-right',
+  'left-facing-fist',
+  'left-facing-fist-dark-skin-tone',
+  'left-facing-fist-light-skin-tone',
+  'left-facing-fist-medium-dark-skin-tone',
+  'left-facing-fist-medium-light-skin-tone',
+  'left-facing-fist-medium-skin-tone',
+  'left-luggage',
+  'left-right-arrow',
+  'left-speech-bubble',
+  'lemon',
+  'leo',
+  'leopard',
+  'letter-a',
+  'letter-b',
+  'letter-c',
+  'letter-d',
+  'letter-e',
+  'letter-f',
+  'letter-g',
+  'letter-h',
+  'letter-i',
+  'letter-j',
+  'letter-k',
+  'letter-l',
+  'letter-m',
+  'letter-n',
+  'letter-o',
+  'letter-p',
+  'letter-q',
+  'letter-r',
+  'letter-s',
+  'letter-t',
+  'letter-u',
+  'letter-v',
+  'letter-w',
+  'letter-x',
+  'letter-y',
+  'letter-z',
+  'level-slider',
+  'libra',
+  'light-bulb',
+  'light-rail',
+  'light-skin-tone',
+  'link',
+  'linked-paperclips',
+  'lion-face',
+  'lipstick',
+  'litter-in-bin-sign',
+  'lizard',
+  'locked',
+  'locked-with-key',
+  'locked-with-pen',
+  'locomotive',
+  'lollipop',
+  'loudly-crying-face',
+  'loudspeaker',
+  'love-hotel',
+  'love-letter',
+  'lying-face',
+  'magnifying-glass-tilted-left',
+  'magnifying-glass-tilted-right',
+  'mahjong-red-dragon',
+  'man',
+  'man-and-woman-holding-hands',
+  'man-dancing',
+  'man-dancing-dark-skin-tone',
+  'man-dancing-light-skin-tone',
+  'man-dancing-medium-dark-skin-tone',
+  'man-dancing-medium-light-skin-tone',
+  'man-dancing-medium-skin-tone',
+  'man-dark-skin-tone',
+  'man-in-suit-levitating',
+  'man-in-tuxedo',
+  'man-in-tuxedo-dark-skin-tone',
+  'man-in-tuxedo-light-skin-tone',
+  'man-in-tuxedo-medium-dark-skin-tone',
+  'man-in-tuxedo-medium-light-skin-tone',
+  'man-in-tuxedo-medium-skin-tone',
+  'man-light-skin-tone',
+  'man-medium-dark-skin-tone',
+  'man-medium-light-skin-tone',
+  'man-medium-skin-tone',
+  'man-with-chinese-cap',
+  'man-with-chinese-cap-dark-skin-tone',
+  'man-with-chinese-cap-light-skin-tone',
+  'man-with-chinese-cap-medium-dark-skin-tone',
+  'man-with-chinese-cap-medium-light-skin-tone',
+  'man-with-chinese-cap-medium-skin-tone',
+  'mans-shoe',
+  'mantelpiece-clock',
+  'map-of-japan',
+  'maple-leaf',
+  'martial-arts-uniform',
+  'meat-on-bone',
+  'medium-dark-skin-tone',
+  'medium-light-skin-tone',
+  'medium-skin-tone',
+  'megaphone',
+  'melon',
+  'memo',
+  'menorah',
+  'mens-room',
+  'metro',
+  'microphone',
+  'microscope',
+  'middle-finger',
+  'middle-finger-dark-skin-tone',
+  'middle-finger-light-skin-tone',
+  'middle-finger-medium-dark-skin-tone',
+  'middle-finger-medium-light-skin-tone',
+  'middle-finger-medium-skin-tone',
+  'military-medal',
+  'milky-way',
+  'minibus',
+  'moai',
+  'mobile-phone',
+  'mobile-phone-off',
+  'mobile-phone-with-arrow',
+  'money-bag',
+  'money-mouth-face',
+  'money-with-wings',
+  'monkey',
+  'monkey-face',
+  'monorail',
+  'moon-viewing-ceremony',
+  'mosque',
+  'motor-boat',
+  'motor-scooter',
+  'motorcycle',
+  'motorway',
+  'mount-fuji',
+  'mountain',
+  'mountain-cableway',
+  'mountain-railway',
+  'mouse',
+  'mouse-face',
+  'mouth',
+  'movie-camera',
+  'mrs-claus',
+  'mrs-claus-dark-skin-tone',
+  'mrs-claus-light-skin-tone',
+  'mrs-claus-medium-dark-skin-tone',
+  'mrs-claus-medium-light-skin-tone',
+  'mrs-claus-medium-skin-tone',
+  'mushroom',
+  'musical-keyboard',
+  'musical-note',
+  'musical-notes',
+  'musical-score',
+  'muted-speaker',
+  'nail-polish',
+  'nail-polish-dark-skin-tone',
+  'nail-polish-light-skin-tone',
+  'nail-polish-medium-dark-skin-tone',
+  'nail-polish-medium-light-skin-tone',
+  'nail-polish-medium-skin-tone',
+  'name-badge',
+  'national-park',
+  'nauseated-face',
+  'necktie',
+  'nerd-face',
+  'neutral-face',
+  'new-button',
+  'new-moon',
+  'new-moon-face',
+  'newspaper',
+  'next-track-button',
+  'ng-button',
+  'night-with-stars',
+  'nine-oclock',
+  'nine-thirty',
+  'no-bicycles',
+  'no-entry',
+  'no-littering',
+  'no-mobile-phones',
+  'no-one-under-eighteen',
+  'no-pedestrians',
+  'no-smoking',
+  'non-potable-water',
+  'nose',
+  'nose-dark-skin-tone',
+  'nose-light-skin-tone',
+  'nose-medium-dark-skin-tone',
+  'nose-medium-light-skin-tone',
+  'nose-medium-skin-tone',
+  'notebook',
+  'notebook-with-decorative-cover',
+  'nut-and-bolt',
+  'o-button',
+  'octopus',
+  'oden',
+  'office-building',
+  'ogre',
+  'oil-drum',
+  'ok-button',
+  'ok-hand',
+  'ok-hand-dark-skin-tone',
+  'ok-hand-light-skin-tone',
+  'ok-hand-medium-dark-skin-tone',
+  'ok-hand-medium-light-skin-tone',
+  'ok-hand-medium-skin-tone',
+  'old-key',
+  'old-man',
+  'old-man-dark-skin-tone',
+  'old-man-light-skin-tone',
+  'old-man-medium-dark-skin-tone',
+  'old-man-medium-light-skin-tone',
+  'old-man-medium-skin-tone',
+  'old-woman',
+  'old-woman-dark-skin-tone',
+  'old-woman-light-skin-tone',
+  'old-woman-medium-dark-skin-tone',
+  'old-woman-medium-light-skin-tone',
+  'old-woman-medium-skin-tone',
+  'om',
+  'on-arrow',
+  'oncoming-automobile',
+  'oncoming-bus',
+  'oncoming-fist',
+  'oncoming-fist-dark-skin-tone',
+  'oncoming-fist-light-skin-tone',
+  'oncoming-fist-medium-dark-skin-tone',
+  'oncoming-fist-medium-light-skin-tone',
+  'oncoming-fist-medium-skin-tone',
+  'oncoming-police-car',
+  'oncoming-taxi',
+  'one-oclock',
+  'one-thirty',
+  'open-book',
+  'open-file-folder',
+  'open-hands',
+  'open-hands-dark-skin-tone',
+  'open-hands-light-skin-tone',
+  'open-hands-medium-dark-skin-tone',
+  'open-hands-medium-light-skin-tone',
+  'open-hands-medium-skin-tone',
+  'open-mailbox-with-lowered-flag',
+  'open-mailbox-with-raised-flag',
+  'ophiuchus',
+  'optical-disk',
+  'orange-book',
+  'orthodox-cross',
+  'outbox-tray',
+  'owl',
+  'ox',
+  'p-button',
+  'package',
+  'page-facing-up',
+  'page-with-curl',
+  'pager',
+  'paintbrush',
+  'palm-tree',
+  'pancakes',
+  'panda-face',
+  'paperclip',
+  'part-alternation-mark',
+  'party-popper',
+  'passenger-ship',
+  'passport-control',
+  'pause-button',
+  'paw-prints',
+  'peace-symbol',
+  'peach',
+  'peanuts',
+  'pear',
+  'pen',
+  'pencil',
+  'penguin',
+  'pensive-face',
+  'people-with-bunny-ears',
+  'people-wrestling',
+  'people-wrestling-dark-skin-tone',
+  'people-wrestling-light-skin-tone',
+  'people-wrestling-medium-dark-skin-tone',
+  'people-wrestling-medium-light-skin-tone',
+  'people-wrestling-medium-skin-tone',
+  'performing-arts',
+  'persevering-face',
+  'person-biking',
+  'person-biking-dark-skin-tone',
+  'person-biking-light-skin-tone',
+  'person-biking-medium-dark-skin-tone',
+  'person-biking-medium-light-skin-tone',
+  'person-biking-medium-skin-tone',
+  'person-bouncing-ball',
+  'person-bouncing-ball-dark-skin-tone',
+  'person-bouncing-ball-light-skin-tone',
+  'person-bouncing-ball-medium-dark-skin-tone',
+  'person-bouncing-ball-medium-light-skin-tone',
+  'person-bouncing-ball-medium-skin-tone',
+  'person-bowing',
+  'person-bowing-dark-skin-tone',
+  'person-bowing-light-skin-tone',
+  'person-bowing-medium-dark-skin-tone',
+  'person-bowing-medium-light-skin-tone',
+  'person-bowing-medium-skin-tone',
+  'person-cartwheeling',
+  'person-cartwheeling-dark-skin-tone',
+  'person-cartwheeling-light-skin-tone',
+  'person-cartwheeling-medium-dark-skin-tone',
+  'person-cartwheeling-medium-light-skin-tone',
+  'person-cartwheeling-medium-skin-tone',
+  'person-facepalming',
+  'person-facepalming-dark-skin-tone',
+  'person-facepalming-light-skin-tone',
+  'person-facepalming-medium-dark-skin-tone',
+  'person-facepalming-medium-light-skin-tone',
+  'person-facepalming-medium-skin-tone',
+  'person-fencing',
+  'person-frowning',
+  'person-frowning-dark-skin-tone',
+  'person-frowning-light-skin-tone',
+  'person-frowning-medium-dark-skin-tone',
+  'person-frowning-medium-light-skin-tone',
+  'person-frowning-medium-skin-tone',
+  'person-gesturing-no',
+  'person-gesturing-no-dark-skin-tone',
+  'person-gesturing-no-light-skin-tone',
+  'person-gesturing-no-medium-dark-skin-tone',
+  'person-gesturing-no-medium-light-skin-tone',
+  'person-gesturing-no-medium-skin-tone',
+  'person-gesturing-ok',
+  'person-gesturing-ok-dark-skin-tone',
+  'person-gesturing-ok-light-skin-tone',
+  'person-gesturing-ok-medium-dark-skin-tone',
+  'person-gesturing-ok-medium-light-skin-tone',
+  'person-gesturing-ok-medium-skin-tone',
+  'person-getting-haircut',
+  'person-getting-haircut-dark-skin-tone',
+  'person-getting-haircut-light-skin-tone',
+  'person-getting-haircut-medium-dark-skin-tone',
+  'person-getting-haircut-medium-light-skin-tone',
+  'person-getting-haircut-medium-skin-tone',
+  'person-getting-massage',
+  'person-getting-massage-dark-skin-tone',
+  'person-getting-massage-light-skin-tone',
+  'person-getting-massage-medium-dark-skin-tone',
+  'person-getting-massage-medium-light-skin-tone',
+  'person-getting-massage-medium-skin-tone',
+  'person-golfing',
+  'person-in-bed',
+  'person-juggling',
+  'person-juggling-dark-skin-tone',
+  'person-juggling-light-skin-tone',
+  'person-juggling-medium-dark-skin-tone',
+  'person-juggling-medium-light-skin-tone',
+  'person-juggling-medium-skin-tone',
+  'person-lifting-weights',
+  'person-lifting-weights-dark-skin-tone',
+  'person-lifting-weights-light-skin-tone',
+  'person-lifting-weights-medium-dark-skin-tone',
+  'person-lifting-weights-medium-light-skin-tone',
+  'person-lifting-weights-medium-skin-tone',
+  'person-mountain-biking',
+  'person-mountain-biking-dark-skin-tone',
+  'person-mountain-biking-light-skin-tone',
+  'person-mountain-biking-medium-dark-skin-tone',
+  'person-mountain-biking-medium-light-skin-tone',
+  'person-mountain-biking-medium-skin-tone',
+  'person-playing-handball',
+  'person-playing-handball-dark-skin-tone',
+  'person-playing-handball-light-skin-tone',
+  'person-playing-handball-medium-dark-skin-tone',
+  'person-playing-handball-medium-light-skin-tone',
+  'person-playing-handball-medium-skin-tone',
+  'person-playing-water-polo',
+  'person-playing-water-polo-dark-skin-tone',
+  'person-playing-water-polo-light-skin-tone',
+  'person-playing-water-polo-medium-dark-skin-tone',
+  'person-playing-water-polo-medium-light-skin-tone',
+  'person-playing-water-polo-medium-skin-tone',
+  'person-pouting',
+  'person-pouting-dark-skin-tone',
+  'person-pouting-light-skin-tone',
+  'person-pouting-medium-dark-skin-tone',
+  'person-pouting-medium-light-skin-tone',
+  'person-pouting-medium-skin-tone',
+  'person-raising-hand',
+  'person-raising-hand-dark-skin-tone',
+  'person-raising-hand-light-skin-tone',
+  'person-raising-hand-medium-dark-skin-tone',
+  'person-raising-hand-medium-light-skin-tone',
+  'person-raising-hand-medium-skin-tone',
+  'person-rowing-boat',
+  'person-rowing-boat-dark-skin-tone',
+  'person-rowing-boat-light-skin-tone',
+  'person-rowing-boat-medium-dark-skin-tone',
+  'person-rowing-boat-medium-light-skin-tone',
+  'person-rowing-boat-medium-skin-tone',
+  'person-running',
+  'person-running-dark-skin-tone',
+  'person-running-light-skin-tone',
+  'person-running-medium-dark-skin-tone',
+  'person-running-medium-light-skin-tone',
+  'person-running-medium-skin-tone',
+  'person-shrugging',
+  'person-shrugging-dark-skin-tone',
+  'person-shrugging-light-skin-tone',
+  'person-shrugging-medium-dark-skin-tone',
+  'person-shrugging-medium-light-skin-tone',
+  'person-shrugging-medium-skin-tone',
+  'person-surfing',
+  'person-surfing-dark-skin-tone',
+  'person-surfing-light-skin-tone',
+  'person-surfing-medium-dark-skin-tone',
+  'person-surfing-medium-light-skin-tone',
+  'person-surfing-medium-skin-tone',
+  'person-swimming',
+  'person-swimming-dark-skin-tone',
+  'person-swimming-light-skin-tone',
+  'person-swimming-medium-dark-skin-tone',
+  'person-swimming-medium-light-skin-tone',
+  'person-swimming-medium-skin-tone',
+  'person-taking-bath',
+  'person-taking-bath-dark-skin-tone',
+  'person-taking-bath-light-skin-tone',
+  'person-taking-bath-medium-dark-skin-tone',
+  'person-taking-bath-medium-light-skin-tone',
+  'person-taking-bath-medium-skin-tone',
+  'person-tipping-hand',
+  'person-tipping-hand-dark-skin-tone',
+  'person-tipping-hand-light-skin-tone',
+  'person-tipping-hand-medium-dark-skin-tone',
+  'person-tipping-hand-medium-light-skin-tone',
+  'person-tipping-hand-medium-skin-tone',
+  'person-walking',
+  'person-walking-dark-skin-tone',
+  'person-walking-light-skin-tone',
+  'person-walking-medium-dark-skin-tone',
+  'person-walking-medium-light-skin-tone',
+  'person-walking-medium-skin-tone',
+  'person-wearing-turban',
+  'person-wearing-turban-dark-skin-tone',
+  'person-wearing-turban-light-skin-tone',
+  'person-wearing-turban-medium-dark-skin-tone',
+  'person-wearing-turban-medium-light-skin-tone',
+  'person-wearing-turban-medium-skin-tone',
+  'pick',
+  'pig',
+  'pig-face',
+  'pig-nose',
+  'pile-of-poo',
+  'pill',
+  'pine-decoration',
+  'pineapple',
+  'ping-pong',
+  'pisces',
+  'pistol',
+  'pizza',
+  'place-of-worship',
+  'play-button',
+  'play-or-pause-button',
+  'police-car',
+  'police-car-light',
+  'police-officer',
+  'police-officer-dark-skin-tone',
+  'police-officer-light-skin-tone',
+  'police-officer-medium-dark-skin-tone',
+  'police-officer-medium-light-skin-tone',
+  'police-officer-medium-skin-tone',
+  'poodle',
+  'pool-8-ball',
+  'popcorn',
+  'post-office',
+  'postal-horn',
+  'postbox',
+  'pot-of-food',
+  'potable-water',
+  'potato',
+  'poultry-leg',
+  'pound-banknote',
+  'pound-symbol',
+  'pouting-cat-face',
+  'pouting-face',
+  'prayer-beads',
+  'pregnant-woman',
+  'pregnant-woman-dark-skin-tone',
+  'pregnant-woman-light-skin-tone',
+  'pregnant-woman-medium-dark-skin-tone',
+  'pregnant-woman-medium-light-skin-tone',
+  'pregnant-woman-medium-skin-tone',
+  'prince',
+  'prince-dark-skin-tone',
+  'prince-light-skin-tone',
+  'prince-medium-dark-skin-tone',
+  'prince-medium-light-skin-tone',
+  'prince-medium-skin-tone',
+  'princess',
+  'princess-dark-skin-tone',
+  'princess-light-skin-tone',
+  'princess-medium-dark-skin-tone',
+  'princess-medium-light-skin-tone',
+  'princess-medium-skin-tone',
+  'printer',
+  'prohibited',
+  'purple-heart',
+  'purse',
+  'pushpin',
+  'question-mark',
+  'rabbit',
+  'rabbit-face',
+  'racing-car',
+  'radio',
+  'radio-button',
+  'radioactive',
+  'railway-car',
+  'railway-track',
+  'rainbow',
+  'raised-back-of-hand',
+  'raised-back-of-hand-dark-skin-tone',
+  'raised-back-of-hand-light-skin-tone',
+  'raised-back-of-hand-medium-dark-skin-tone',
+  'raised-back-of-hand-medium-light-skin-tone',
+  'raised-back-of-hand-medium-skin-tone',
+  'raised-fist',
+  'raised-fist-dark-skin-tone',
+  'raised-fist-light-skin-tone',
+  'raised-fist-medium-dark-skin-tone',
+  'raised-fist-medium-light-skin-tone',
+  'raised-fist-medium-skin-tone',
+  'raised-hand',
+  'raised-hand-dark-skin-tone',
+  'raised-hand-light-skin-tone',
+  'raised-hand-medium-dark-skin-tone',
+  'raised-hand-medium-light-skin-tone',
+  'raised-hand-medium-skin-tone',
+  'raising-hands',
+  'raising-hands-dark-skin-tone',
+  'raising-hands-light-skin-tone',
+  'raising-hands-medium-dark-skin-tone',
+  'raising-hands-medium-light-skin-tone',
+  'raising-hands-medium-skin-tone',
+  'ram',
+  'rat',
+  'record-button',
+  'recycling-symbol',
+  'red-apple',
+  'red-circle',
+  'red-heart',
+  'red-paper-lantern',
+  'red-triangle-pointed-down',
+  'red-triangle-pointed-up',
+  'registered',
+  'relieved-face',
+  'reminder-ribbon',
+  'repeat-button',
+  'repeat-single-button',
+  'rescue-workers-helmet',
+  'restroom',
+  'reverse-button',
+  'revolving-hearts',
+  'rhinoceros',
+  'ribbon',
+  'rice-ball',
+  'rice-cracker',
+  'right-anger-bubble',
+  'right-arrow',
+  'right-arrow-curving-down',
+  'right-arrow-curving-left',
+  'right-arrow-curving-up',
+  'right-facing-fist',
+  'right-facing-fist-dark-skin-tone',
+  'right-facing-fist-light-skin-tone',
+  'right-facing-fist-medium-dark-skin-tone',
+  'right-facing-fist-medium-light-skin-tone',
+  'right-facing-fist-medium-skin-tone',
+  'ring',
+  'roasted-sweet-potato',
+  'robot-face',
+  'rocket',
+  'rolled-up-newspaper',
+  'roller-coaster',
+  'rolling-on-the-floor-laughing',
+  'rooster',
+  'rose',
+  'rosette',
+  'round-pushpin',
+  'rugby-football',
+  'running-shirt',
+  'running-shoe',
+  'sad-but-relieved-face',
+  'sagittarius',
+  'sailboat',
+  'sake',
+  'santa-claus',
+  'santa-claus-dark-skin-tone',
+  'santa-claus-light-skin-tone',
+  'santa-claus-medium-dark-skin-tone',
+  'santa-claus-medium-light-skin-tone',
+  'santa-claus-medium-skin-tone',
+  'satellite',
+  'satellite-antenna',
+  'saxophone',
+  'school',
+  'scissors',
+  'scorpio',
+  'scorpion',
+  'scroll',
+  'seat',
+  'see-no-evil-monkey',
+  'seedling',
+  'selfie',
+  'selfie-dark-skin-tone',
+  'selfie-light-skin-tone',
+  'selfie-medium-dark-skin-tone',
+  'selfie-medium-light-skin-tone',
+  'selfie-medium-skin-tone',
+  'seven-oclock',
+  'seven-thirty',
+  'shallow-pan-of-food',
+  'shamrock',
+  'shark',
+  'shaved-ice',
+  'sheaf-of-rice',
+  'shield',
+  'shinto-shrine',
+  'ship',
+  'shooting-star',
+  'shopping-bags',
+  'shopping-cart',
+  'shortcake',
+  'shower',
+  'shrimp',
+  'shuffle-tracks-button',
+  'sign-of-the-horns',
+  'sign-of-the-horns-dark-skin-tone',
+  'sign-of-the-horns-light-skin-tone',
+  'sign-of-the-horns-medium-dark-skin-tone',
+  'sign-of-the-horns-medium-light-skin-tone',
+  'sign-of-the-horns-medium-skin-tone',
+  'six-oclock',
+  'six-thirty',
+  'skier',
+  'skis',
+  'skull',
+  'skull-and-crossbones',
+  'sleeping-face',
+  'sleepy-face',
+  'slightly-frowning-face',
+  'slightly-smiling-face',
+  'slot-machine',
+  'small-airplane',
+  'small-blue-diamond',
+  'small-orange-diamond',
+  'smiling-cat-face-with-heart-eyes',
+  'smiling-face',
+  'smiling-face-with-halo',
+  'smiling-face-with-heart-eyes',
+  'smiling-face-with-horns',
+  'smiling-face-with-smiling-eyes',
+  'smiling-face-with-sunglasses',
+  'smirking-face',
+  'snail',
+  'snake',
+  'sneezing-face',
+  'snow-capped-mountain',
+  'snowboarder',
+  'snowflake',
+  'snowman',
+  'snowman-without-snow',
+  'soccer-ball',
+  'soft-ice-cream',
+  'soon-arrow',
+  'sos-button',
+  'spade-suit',
+  'spaghetti',
+  'sparkle',
+  'sparkler',
+  'sparkles',
+  'sparkling-heart',
+  'speak-no-evil-monkey',
+  'speaker-high-volume',
+  'speaker-low-volume',
+  'speaker-medium-volume',
+  'speaking-head',
+  'speech-balloon',
+  'speedboat',
+  'spider',
+  'spider-web',
+  'spiral-calendar',
+  'spiral-notepad',
+  'spiral-shell',
+  'spoon',
+  'sport-utility-vehicle',
+  'sports-medal',
+  'spouting-whale',
+  'squid',
+  'squinting-face-with-tongue',
+  'stadium',
+  'star',
+  'star-and-crescent',
+  'star-of-david',
+  'station',
+  'statue-of-liberty',
+  'steaming-bowl',
+  'stop-button',
+  'stop-sign',
+  'stopwatch',
+  'straight-ruler',
+  'strawberry',
+  'studio-microphone',
+  'stuffed-flatbread',
+  'sun',
+  'sun-behind-cloud',
+  'sun-behind-large-cloud',
+  'sun-behind-rain-cloud',
+  'sun-behind-small-cloud',
+  'sun-with-face',
+  'sunflower',
+  'sunglasses',
+  'sunrise',
+  'sunrise-over-mountains',
+  'sunset',
+  'sushi',
+  'suspension-railway',
+  'sweat-droplets',
+  'synagogue',
+  'syringe',
+  't-shirt',
+  'taco',
+  'tanabata-tree',
+  'tangerine',
+  'taurus',
+  'taxi',
+  'teacup-without-handle',
+  'tear-off-calendar',
+  'telephone',
+  'telephone-receiver',
+  'telescope',
+  'television',
+  'ten-oclock',
+  'ten-thirty',
+  'tennis',
+  'tent',
+  'thermometer',
+  'thinking-face',
+  'thought-balloon',
+  'three-oclock',
+  'three-thirty',
+  'thumbs-down',
+  'thumbs-down-dark-skin-tone',
+  'thumbs-down-light-skin-tone',
+  'thumbs-down-medium-dark-skin-tone',
+  'thumbs-down-medium-light-skin-tone',
+  'thumbs-down-medium-skin-tone',
+  'thumbs-up',
+  'thumbs-up-dark-skin-tone',
+  'thumbs-up-light-skin-tone',
+  'thumbs-up-medium-dark-skin-tone',
+  'thumbs-up-medium-light-skin-tone',
+  'thumbs-up-medium-skin-tone',
+  'ticket',
+  'tiger',
+  'tiger-face',
+  'timer-clock',
+  'tired-face',
+  'toilet',
+  'tokyo-tower',
+  'tomato',
+  'tongue',
+  'top-arrow',
+  'top-hat',
+  'tornado',
+  'trackball',
+  'tractor',
+  'trade-mark',
+  'train',
+  'tram',
+  'tram-car',
+  'triangular-ruler',
+  'trident-emblem',
+  'trolleybus',
+  'trophy',
+  'tropical-drink',
+  'tropical-fish',
+  'trumpet',
+  'tulip',
+  'tumbler-glass',
+  'turkey',
+  'turtle',
+  'twelve-oclock',
+  'twelve-thirty',
+  'two-hearts',
+  'two-hump-camel',
+  'two-men-holding-hands',
+  'two-oclock',
+  'two-thirty',
+  'two-women-holding-hands',
+  'umbrella',
+  'umbrella-on-ground',
+  'umbrella-with-rain-drops',
+  'unamused-face',
+  'unicorn-face',
+  'unlocked',
+  'up-arrow',
+  'up-down-arrow',
+  'up-left-arrow',
+  'up-right-arrow',
+  'up-text-button',
+  'upside-down-face',
+  'upwards-button',
+  'vertical-traffic-light',
+  'vibration-mode',
+  'victory-hand',
+  'victory-hand-dark-skin-tone',
+  'victory-hand-light-skin-tone',
+  'victory-hand-medium-dark-skin-tone',
+  'victory-hand-medium-light-skin-tone',
+  'victory-hand-medium-skin-tone',
+  'video-camera',
+  'video-game',
+  'videocassette',
+  'violin',
+  'virgo',
+  'volcano',
+  'volleyball',
+  'vs-button',
+  'vulcan-salute',
+  'vulcan-salute-dark-skin-tone',
+  'vulcan-salute-light-skin-tone',
+  'vulcan-salute-medium-dark-skin-tone',
+  'vulcan-salute-medium-light-skin-tone',
+  'vulcan-salute-medium-skin-tone',
+  'waning-crescent-moon',
+  'waning-gibbous-moon',
+  'warning',
+  'wastebasket',
+  'watch',
+  'water-buffalo',
+  'water-closet',
+  'water-wave',
+  'watermelon',
+  'waving-hand',
+  'waving-hand-dark-skin-tone',
+  'waving-hand-light-skin-tone',
+  'waving-hand-medium-dark-skin-tone',
+  'waving-hand-medium-light-skin-tone',
+  'waving-hand-medium-skin-tone',
+  'wavy-dash',
+  'waxing-crescent-moon',
+  'waxing-gibbous-moon',
+  'weary-cat-face',
+  'weary-face',
+  'wedding',
+  'whale',
+  'wheel-of-dharma',
+  'wheelchair-symbol',
+  'white-circle',
+  'white-exclamation-mark',
+  'white-flower',
+  'white-heavy-check-mark',
+  'white-large-square',
+  'white-medium-small-square',
+  'white-medium-square',
+  'white-question-mark',
+  'white-small-square',
+  'white-square-button',
+  'wilted-flower',
+  'wind-chime',
+  'wind-face',
+  'wine-glass',
+  'winking-face',
+  'winking-face-with-tongue',
+  'wolf',
+  'woman',
+  'woman-dancing',
+  'woman-dancing-dark-skin-tone',
+  'woman-dancing-light-skin-tone',
+  'woman-dancing-medium-dark-skin-tone',
+  'woman-dancing-medium-light-skin-tone',
+  'woman-dancing-medium-skin-tone',
+  'woman-dark-skin-tone',
+  'woman-light-skin-tone',
+  'woman-medium-dark-skin-tone',
+  'woman-medium-light-skin-tone',
+  'woman-medium-skin-tone',
+  'womans-boot',
+  'womans-clothes',
+  'womans-hat',
+  'womans-sandal',
+  'womens-room',
+  'world-map',
+  'worried-face',
+  'wrapped-gift',
+  'wrench',
+  'writing-hand',
+  'writing-hand-dark-skin-tone',
+  'writing-hand-light-skin-tone',
+  'writing-hand-medium-dark-skin-tone',
+  'writing-hand-medium-light-skin-tone',
+  'writing-hand-medium-skin-tone',
+  'yellow-heart',
+  'yen-banknote',
+  'yin-yang',
+  'zipper-mouth-face',
+  'zzz',
+]

From 3ec9de4214df0b672902655149c3f86335878c66 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 12:51:24 +0530
Subject: [PATCH 15/41] refactor(gui): popup size correction and destroy popup
 on hide

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 9 +--------
 packages/nc-gui/components/general/EmojiIcons.vue | 4 ++--
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 2d84d402df..4d68cd0342 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -565,15 +565,8 @@ const setIcon = (icon: string, table: TableType) => {
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                          <a-dropdown trigger="click" @click.stop>
+                          <a-dropdown trigger="click" @click.stop destroy-popup-on-hide>
                             <div @click.stop>
-                              <!--                              <MdiDrag
-                                v-if="isUIAllowed('treeview-drag-n-drop')"
-                                :class="`nc-child-draggable-icon-${table.title}`"
-                                class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                                @click.stop.prevent
-                              /> -->
-
                               <a-tooltip>
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon">
                                   <Icon :key="table.meta?.icon" class="text-xl" :icon="table.meta?.icon"></Icon>
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index a13f677f6d..33203835b5 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -26,9 +26,9 @@ const selectIcon = (icon: string) => {
 </script>
 
 <template>
-  <div class="p-1 w-70 h-75 flex flex-col gap-1 justify-start">
+  <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start">
     <div @click.stop>
-      <input v-model="search" class="p-1 border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
+      <input v-model="search" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
     </div>
     <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">

From 3a72e4186c75dea6996ccc93c0b95e223f25393f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 15:36:07 +0530
Subject: [PATCH 16/41] test(playwright): add test for icon change

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |  1 -
 .../nc-gui/components/dashboard/TreeView.vue  | 28 ++++++-------------
 .../nc-gui/components/general/EmojiIcons.vue  |  4 +--
 .../[projectType]/[projectId]/index/index.vue |  4 +--
 tests/playwright/pages/Dashboard/TreeView.ts  | 21 ++++++++++++++
 .../playwright/tests/tableOperations.spec.ts  |  7 ++++-
 6 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 79b48c1824..bb95e0722e 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -50,7 +50,6 @@ declare module '@vue/runtime-core' {
     AntDesignMenuFoldOutlined: typeof import('~icons/ant-design/menu-fold-outlined')['default']
     AntDesignMenuUnfoldOutlined: typeof import('~icons/ant-design/menu-unfold-outlined')['default']
     APagination: typeof import('ant-design-vue/es')['Pagination']
-    APopover: typeof import('ant-design-vue/es')['Popover']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARate: typeof import('ant-design-vue/es')['Rate']
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 4d68cd0342..40642dc6b5 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -78,7 +78,6 @@ const initSortable = (el: Element) => {
   if (!base_id) return
   if (sortables[base_id]) sortables[base_id].destroy()
   Sortable.create(el as HTMLLIElement, {
-    // handle: '.nc-drag-icon',
     onEnd: async (evt) => {
       const offset = tables.value.findIndex((table) => table.base_id === base_id)
 
@@ -565,16 +564,21 @@ const setIcon = (icon: string, table: TableType) => {
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                          <a-dropdown trigger="click" @click.stop destroy-popup-on-hide>
+                          <a-dropdown trigger="click" destroy-popup-on-hide @click.stop>
                             <div @click.stop>
                               <a-tooltip>
-                                <span v-if="table.meta?.icon" :key="table.meta?.icon">
-                                  <Icon :key="table.meta?.icon" class="text-xl" :icon="table.meta?.icon"></Icon>
+                                <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon">
+                                  <Icon
+                                    :key="table.meta?.icon"
+                                    :data-testid="`nc-icon-${table.meta?.icon}`"
+                                    class="text-xl"
+                                    :icon="table.meta?.icon"
+                                  ></Icon>
                                 </span>
                                 <component
                                   :is="icon(table)"
                                   v-else
-                                  class="nc-view-icon w-5"
+                                  class="nc-table-icon nc-view-icon w-5"
                                   :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                 />
 
@@ -585,20 +589,6 @@ const setIcon = (icon: string, table: TableType) => {
                               <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
                             </template>
                           </a-dropdown>
-
-                          <!--
-                                                    <MdiDragVertical
-                                                      v-if="isUIAllowed('treeview-drag-n-drop')"
-                                                      :class="`nc-child-draggable-icon-${table.title}`"
-                                                      class="nc-drag-icon text-xs hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 cursor-move"
-                                                      @click.stop.prevent
-                                                    />
-
-                                                    <component
-                                                      :is="icon(table)"
-                                                      class="nc-view-icon text-xs"
-                                                      :class="{ 'group-hover:hidden group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                                                    /> -->
                         </div>
 
                         <div class="nc-tbl-title flex-1">
diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index 33203835b5..bcf1e1bd54 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -26,9 +26,9 @@ const selectIcon = (icon: string) => {
 </script>
 
 <template>
-  <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start">
+  <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container">
     <div @click.stop>
-      <input v-model="search" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
+      <input v-model="search" data-testid="nc-emoji-filter" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
     </div>
     <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index d43bf7be2f..23c115ba18 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -47,9 +47,9 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
           <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
-              <div class="flex items-center gap-2 max-w-[110px]">
+              <div class="flex items-center gap-2 max-w-[110px]" data-testid="nc-tab-title">
                 <div class="flex items-center">
-                  <Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" />
+                  <Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" :data-testid="`nc-tab-icon-${tab.meta?.icon}`"/>
                   <component :is="icon(tab)" v-else class="text-sm" />
                 </div>
 
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 38d14f725e..586f29ffe7 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -129,6 +129,27 @@ export class TreeViewPage extends BasePage {
     await importMenu.locator(`.ant-dropdown-menu-title-content:has-text("${title}")`).click();
   }
 
+  async changeTableIcon({ title, icon }: { title: string; icon: string }) {
+    await this.get().locator(`.nc-project-tree-tbl-${title} .nc-table-icon`).click();
+
+    await this.rootPage.getByTestId('nc-emoji-filter').type(icon);
+    await this.rootPage.getByTestId('nc-emoji-container').locator(`.nc-emoji-item >> svg`).first().click();
+
+    await this.rootPage.getByTestId('nc-emoji-container').isHidden();
+    await expect(
+      this.get().locator(`.nc-project-tree-tbl-${title} [data-testid="nc-icon-emojione:${icon}"]`)
+    ).toHaveCount(1);
+  }
+
+  async verifyTabIcon({ title, icon }: { title: string; icon: string }) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await expect(
+      this.rootPage.locator(
+        `[data-testid="nc-tab-title"]:has-text("${title}") [data-testid="nc-tab-icon-emojione:${icon}"]`
+      )
+    ).toBeVisible();
+  }
+
   // todo: Break this into smaller methods
   async validateRoleAccess(param: { role: string }) {
     // Add new table button
diff --git a/tests/playwright/tests/tableOperations.spec.ts b/tests/playwright/tests/tableOperations.spec.ts
index 209a1b7c4f..eef8d3b97e 100644
--- a/tests/playwright/tests/tableOperations.spec.ts
+++ b/tests/playwright/tests/tableOperations.spec.ts
@@ -13,7 +13,7 @@ test.describe('Table Operations', () => {
     settings = dashboard.settings;
   });
 
-  test('Create, and delete table, verify in audit tab, rename City table and reorder tables', async () => {
+  test.only('Create, and delete table, verify in audit tab, rename City table, update icon and reorder tables', async () => {
     await dashboard.treeView.createTable({ title: 'tablex' });
     await dashboard.treeView.verifyTable({ title: 'tablex' });
 
@@ -46,5 +46,10 @@ test.describe('Table Operations', () => {
       destinationTable: 'Address',
     });
     await dashboard.treeView.verifyTable({ title: 'Address', index: 0 });
+
+    // verify table icon customization
+    await dashboard.treeView.openTable({ title: 'Address' });
+    await dashboard.treeView.changeTableIcon({ title: 'Address', icon: 'american-football' });
+    await dashboard.treeView.verifyTabIcon({ title: 'Address', icon: 'american-football' });
   });
 });

From 1e8271a2778052de3e8a34509bf545b33c8a253d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 17:30:53 +0530
Subject: [PATCH 17/41] refactor(gui): code cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/general/EmojiIcons.vue    | 12 +++++++++++-
 .../pages/[projectType]/[projectId]/index/index.vue  |  7 ++++++-
 tests/playwright/tests/tableOperations.spec.ts       |  2 +-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/general/EmojiIcons.vue b/packages/nc-gui/components/general/EmojiIcons.vue
index bcf1e1bd54..64141e7b5e 100644
--- a/packages/nc-gui/components/general/EmojiIcons.vue
+++ b/packages/nc-gui/components/general/EmojiIcons.vue
@@ -6,6 +6,9 @@ import { emojiIcons } from '#imports'
 const emit = defineEmits(['selectIcon'])
 let search = $ref('')
 
+// keep a variable to load icons with infinite scroll
+// set initial value to 60 to load first 60 icons (index - `0 - 59`)
+// and next value will be 120 and shows first 120 icons ( index - `0 - 129`)
 let toIndex = $ref(60)
 
 const filteredIcons = computed(() => {
@@ -13,6 +16,7 @@ const filteredIcons = computed(() => {
 })
 
 const load = () => {
+  // increment `toIndex` to include next set of icons
   toIndex += Math.min(filteredIcons.value.length, toIndex + 60)
   if (toIndex > filteredIcons.value.length) {
     toIndex = filteredIcons.value.length
@@ -28,7 +32,13 @@ const selectIcon = (icon: string) => {
 <template>
   <div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container">
     <div @click.stop>
-      <input v-model="search" data-testid="nc-emoji-filter" class="p-1 text-xs border-1 w-full overflow-y-auto" placeholder="Search" @input="toIndex = 60" />
+      <input
+        v-model="search"
+        data-testid="nc-emoji-filter"
+        class="p-1 text-xs border-1 w-full overflow-y-auto"
+        placeholder="Search"
+        @input="toIndex = 60"
+      />
     </div>
     <div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull">
       <div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)">
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 23c115ba18..8e050add53 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -49,7 +49,12 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
             <template #tab>
               <div class="flex items-center gap-2 max-w-[110px]" data-testid="nc-tab-title">
                 <div class="flex items-center">
-                  <Icon v-if="tab.meta?.icon" :icon="tab.meta?.icon" class="text-xl" :data-testid="`nc-tab-icon-${tab.meta?.icon}`"/>
+                  <Icon
+                    v-if="tab.meta?.icon"
+                    :icon="tab.meta?.icon"
+                    class="text-xl"
+                    :data-testid="`nc-tab-icon-${tab.meta?.icon}`"
+                  />
                   <component :is="icon(tab)" v-else class="text-sm" />
                 </div>
 
diff --git a/tests/playwright/tests/tableOperations.spec.ts b/tests/playwright/tests/tableOperations.spec.ts
index eef8d3b97e..e31821f9c0 100644
--- a/tests/playwright/tests/tableOperations.spec.ts
+++ b/tests/playwright/tests/tableOperations.spec.ts
@@ -13,7 +13,7 @@ test.describe('Table Operations', () => {
     settings = dashboard.settings;
   });
 
-  test.only('Create, and delete table, verify in audit tab, rename City table, update icon and reorder tables', async () => {
+  test('Create, and delete table, verify in audit tab, rename City table, update icon and reorder tables', async () => {
     await dashboard.treeView.createTable({ title: 'tablex' });
     await dashboard.treeView.verifyTable({ title: 'tablex' });
 

From 15fbc329859a5ed69813646eea98d90441c8e7b4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 8 Dec 2022 20:12:26 +0530
Subject: [PATCH 18/41] fix(gui): add ui permission for set icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dashboard/TreeView.vue  | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 40642dc6b5..8e1f0f97f8 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TableType } from 'nocodb-sdk'
 import type { Input } from 'ant-design-vue'
+import { Dropdown, Tooltip, message } from 'ant-design-vue'
 import Sortable from 'sortablejs'
 import GithubButton from 'vue-github-button'
 import { Icon } from '@iconify/vue'
@@ -10,6 +11,7 @@ import {
   Empty,
   TabType,
   computed,
+  extractSdkResponseErrorMsg,
   isDrawerOrModalExist,
   isMac,
   reactive,
@@ -300,18 +302,24 @@ watch(
   { immediate: true },
 )
 
-const setIcon = (icon: string, table: TableType) => {
-  table.meta = {
-    ...(table.meta || {}),
-    icon,
-  }
-  tables.value.splice(tables.value.indexOf(table), 1, { ...table })
+const setIcon = async (icon: string, table: TableType) => {
+  try {
+    table.meta = {
+      ...(table.meta || {}),
+      icon,
+    }
+    tables.value.splice(tables.value.indexOf(table), 1, { ...table })
 
-  updateTab({ id: table.id }, { meta: table.meta })
+    updateTab({ id: table.id }, { meta: table.meta })
 
-  $api.dbTable.update(table.id as string, {
-    meta: table.meta,
-  })
+    $api.dbTable.update(table.id as string, {
+      meta: table.meta,
+    })
+
+    $e('a:table:icon:navdraw', { icon })
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
 }
 </script>
 
@@ -564,9 +572,14 @@ const setIcon = (icon: string, table: TableType) => {
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                          <a-dropdown trigger="click" destroy-popup-on-hide @click.stop>
+                          <component
+                            :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
+                            trigger="click"
+                            destroy-popup-on-hide
+                            @click.stop
+                          >
                             <div @click.stop>
-                              <a-tooltip>
+                              <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon">
                                   <Icon
                                     :key="table.meta?.icon"
@@ -582,13 +595,13 @@ const setIcon = (icon: string, table: TableType) => {
                                   :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
                                 />
 
-                                <template #title>Change icon</template>
-                              </a-tooltip>
+                                <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
+                              </component>
                             </div>
-                            <template #overlay>
+                            <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
                               <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
                             </template>
-                          </a-dropdown>
+                          </component>
                         </div>
 
                         <div class="nc-tbl-title flex-1">

From d6bb8c659e92e4fbd47b96dd924541a5f890dfc0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 12:42:41 +0530
Subject: [PATCH 19/41] feat(gui): show custom table icon in expanded row title

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/general/TableIcon.vue   | 22 +++++++++++++++++++
 .../smartsheet/expanded-form/Header.vue       |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/general/TableIcon.vue

diff --git a/packages/nc-gui/components/general/TableIcon.vue b/packages/nc-gui/components/general/TableIcon.vue
new file mode 100644
index 0000000000..f5c9126f2f
--- /dev/null
+++ b/packages/nc-gui/components/general/TableIcon.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { Icon as IcIcon } from '@iconify/vue'
+import type { TableType } from 'nocodb-sdk'
+
+const { meta: tableMeta } = defineProps<{
+  meta: TableType
+}>()
+</script>
+
+<template>
+  <IcIcon
+    v-if="tableMeta.meta?.icon"
+    :data-testid="`nc-icon-${tableMeta.meta?.icon}`"
+    class="text-xl"
+    :icon="tableMeta.meta?.icon"
+  ></IcIcon>
+
+  <MdiEyeCircleOutline v-else-if="tableMeta.meta?.type === 'view'" class="w-5" />
+  <MdiTableLarge v-else class="w-5" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index a9c5107a66..823d5f9800 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -77,7 +77,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 <template>
   <div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header">
     <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
-      <mdi-table-arrow-right :style="{ color: iconColor }" />
+      <GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2"></GeneralTableIcon>
 
       <template v-if="meta">
         {{ meta.title }}

From d2ec2fbaf1d3732262ef8bf900b672c60147a72c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 12:55:39 +0530
Subject: [PATCH 20/41] fix(gui): icon nd table name alignment correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8e1f0f97f8..927df76ab8 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -577,10 +577,11 @@ const setIcon = async (icon: string, table: TableType) => {
                             trigger="click"
                             destroy-popup-on-hide
                             @click.stop
+                            class="flex items-center"
                           >
-                            <div @click.stop>
+                            <div @click.stop class="flex items-center">
                               <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-                                <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon">
+                                <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
                                   <Icon
                                     :key="table.meta?.icon"
                                     :data-testid="`nc-icon-${table.meta?.icon}`"

From fe83bc8bceeba85321a723f32748af207cf29167 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 13:37:45 +0530
Subject: [PATCH 21/41] fix(gui): handle table name overflow issue

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue   | 6 +++---
 packages/nc-gui/components/general/TruncateText.vue | 4 +---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 927df76ab8..8128043e8d 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -438,7 +438,7 @@ const setIcon = async (icon: string, table: TableType) => {
         <div v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
           <div
             v-if="isUIAllowed('table-create')"
-            class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+            class="group flex items-center gap-2 pl-2 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog(bases[0].id)"
           >
             <MdiPlus class="w-5" />
@@ -568,7 +568,7 @@ const setIcon = async (icon: string, table: TableType) => {
                     :data-testid="`tree-view-table-${table.title}`"
                     @click="addTableTab(table)"
                   >
-                    <GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
+                    <GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
                       <template #title>{{ table.table_name }}</template>
                       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
                         <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
@@ -606,7 +606,7 @@ const setIcon = async (icon: string, table: TableType) => {
                         </div>
 
                         <div class="nc-tbl-title flex-1">
-                          <GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
+                          <GeneralTruncateText :length="activeTable === table.id ? 18 : 20">{{ table.title }}</GeneralTruncateText>
                         </div>
 
                         <a-dropdown
diff --git a/packages/nc-gui/components/general/TruncateText.vue b/packages/nc-gui/components/general/TruncateText.vue
index 4ae570f551..9b01c85898 100644
--- a/packages/nc-gui/components/general/TruncateText.vue
+++ b/packages/nc-gui/components/general/TruncateText.vue
@@ -41,7 +41,5 @@ const shortName = computed(() =>
   <div v-else class="w-full" data-testid="truncate-label">
     <slot />
   </div>
-  <div ref="text" class="hidden">
-    <slot />
-  </div>
+  <div ref="text" class="hidden"><slot /></div>
 </template>

From fc17646e602072bd777e5038b65872ea7b87c837 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 13:40:50 +0530
Subject: [PATCH 22/41] fix(gui): re-render TruncateText component if table
 name changed

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 8128043e8d..ebafc02e24 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -606,7 +606,7 @@ const setIcon = async (icon: string, table: TableType) => {
                         </div>
 
                         <div class="nc-tbl-title flex-1">
-                          <GeneralTruncateText :length="activeTable === table.id ? 18 : 20">{{ table.title }}</GeneralTruncateText>
+                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{ table.title }}</GeneralTruncateText>
                         </div>
 
                         <a-dropdown

From 51d81b0b8b53cac54d68f16931941378e966a4f7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 16:09:59 +0530
Subject: [PATCH 23/41] feat(gui): show table icon in LTAR and UI acl

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/TreeView.vue    |  8 +++++---
 .../nc-gui/components/dashboard/settings/UIAcl.vue   | 12 +++++++++++-
 packages/nc-gui/components/general/TableIcon.vue     |  4 ++--
 .../column/LinkedToAnotherRecordOptions.vue          |  8 +++++++-
 .../nocodb/src/lib/meta/api/modelVisibilityApis.ts   |  3 ++-
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index ebafc02e24..af9b751f78 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -576,10 +576,10 @@ const setIcon = async (icon: string, table: TableType) => {
                             :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
                             trigger="click"
                             destroy-popup-on-hide
-                            @click.stop
                             class="flex items-center"
+                            @click.stop
                           >
-                            <div @click.stop class="flex items-center">
+                            <div class="flex items-center" @click.stop>
                               <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
                                 <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
                                   <Icon
@@ -606,7 +606,9 @@ const setIcon = async (icon: string, table: TableType) => {
                         </div>
 
                         <div class="nc-tbl-title flex-1">
-                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{ table.title }}</GeneralTruncateText>
+                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
+                            table.title
+                          }}</GeneralTruncateText>
                         </div>
 
                         <a-dropdown
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 3aafc67104..b2d05e14ca 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -159,7 +159,17 @@ const columns = [
           </template>
 
           <template #bodyCell="{ record, column }">
-            <div v-if="column.name === 'table_name'">{{ record._ptn }}</div>
+            <div v-if="column.name === 'table_name'">
+              <div class="flex items-center gap-1">
+                <div class="min-w-5 flex items-center justify-center">
+                  <GeneralTableIcon
+                    :meta="{ meta: record.table_meta, type: record.ptype }"
+                    class="text-gray-500"
+                  ></GeneralTableIcon>
+                </div>
+                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record._ptn }}</span>
+              </div>
+            </div>
 
             <div v-if="column.name === 'view_name'">
               <div class="flex items-center">
diff --git a/packages/nc-gui/components/general/TableIcon.vue b/packages/nc-gui/components/general/TableIcon.vue
index f5c9126f2f..732cf953c5 100644
--- a/packages/nc-gui/components/general/TableIcon.vue
+++ b/packages/nc-gui/components/general/TableIcon.vue
@@ -11,11 +11,11 @@ const { meta: tableMeta } = defineProps<{
   <IcIcon
     v-if="tableMeta.meta?.icon"
     :data-testid="`nc-icon-${tableMeta.meta?.icon}`"
-    class="text-xl"
+    class="text-lg"
     :icon="tableMeta.meta?.icon"
   ></IcIcon>
 
-  <MdiEyeCircleOutline v-else-if="tableMeta.meta?.type === 'view'" class="w-5" />
+  <MdiEyeCircleOutline v-else-if="tableMeta?.type === 'view'" class="w-5" />
   <MdiTableLarge v-else class="w-5" />
 </template>
 
diff --git a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
index f137ed3edd..a7fb2485e7 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue
@@ -73,7 +73,13 @@ const filterOption = (value: string, option: { key: string }) => option.key.toLo
           @change="onDataTypeChange"
         >
           <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
-            {{ table.title }}
+            <div class="flex items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="table" class="text-gray-500"></GeneralTableIcon>
+              </div>
+
+              <span class="overflow-ellipsis min-w-0 shrink-1">{{ table.title }}</span>
+            </div>
           </a-select-option>
         </a-select>
       </a-form-item>
diff --git a/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts b/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
index 59b7006f71..3504418a0a 100644
--- a/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
+++ b/packages/nocodb/src/lib/meta/api/modelVisibilityApis.ts
@@ -48,7 +48,7 @@ export async function xcVisibilityMetaGet(
   const roles = ['owner', 'creator', 'viewer', 'editor', 'commenter', 'guest'];
 
   const defaultDisabled = roles.reduce((o, r) => ({ ...o, [r]: false }), {});
-  
+
   let models =
     _models ||
     (await Model.list({
@@ -78,6 +78,7 @@ export async function xcVisibilityMetaGet(
         ptype: model.type,
         tn: view.title,
         _tn: view.title,
+        table_meta: model.meta,
         ...view,
         disabled: { ...defaultDisabled },
       };

From 3aa340d47e46cc9a71116f658a3ada805ac965d6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 23:54:19 +0530
Subject: [PATCH 24/41] feat(gui): update icons order

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/utils/iconUtils.ts | 3134 ++++++++++++----------------
 1 file changed, 1386 insertions(+), 1748 deletions(-)

diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 5133fa422e..45dd6f219d 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -76,1838 +76,1476 @@ export const getMdiIcon = (type: string): any => {
 }
 
 export const emojiIcons = [
-  '1st-place-medal',
-  '2nd-place-medal',
-  '3rd-place-medal',
-  'a-button',
-  'ab-button',
-  'admission-tickets',
-  'aerial-tramway',
-  'airplane',
-  'airplane-arrival',
-  'airplane-departure',
-  'alarm-clock',
-  'alembic',
+  'grinning-face',
+  'grinning-face-with-big-eyes',
+  'grinning-face-with-smiling-eyes',
+  'beaming-face-with-smiling-eyes',
+  'grinning-squinting-face',
+  'grinning-face-with-sweat',
+  'rolling-on-the-floor-laughing',
+  'face-with-tears-of-joy',
+  'slightly-smiling-face',
+  'upside-down-face',
+  'winking-face',
+  'smiling-face-with-smiling-eyes',
+  'smiling-face-with-halo',
+  'smiling-face-with-heart-eyes',
+  'face-blowing-a-kiss',
+  'kissing-face',
+  'smiling-face',
+  'kissing-face-with-closed-eyes',
+  'kissing-face-with-smiling-eyes',
+  'face-savoring-food',
+  'face-with-tongue',
+  'winking-face-with-tongue',
+  'squinting-face-with-tongue',
+  'money-mouth-face',
+  'hugging-face',
+  'thinking-face',
+  'zipper-mouth-face',
+  'neutral-face',
+  'expressionless-face',
+  'face-without-mouth',
+  'smirking-face',
+  'unamused-face',
+  'face-with-rolling-eyes',
+  'grimacing-face',
+  'lying-face',
+  'relieved-face',
+  'pensive-face',
+  'sleepy-face',
+  'drooling-face',
+  'sleeping-face',
+  'face-with-medical-mask',
+  'face-with-thermometer',
+  'face-with-head-bandage',
+  'nauseated-face',
+  'sneezing-face',
+  'dizzy-face',
+  'cowboy-hat-face',
+  'smiling-face-with-sunglasses',
+  'nerd-face',
+  'confused-face',
+  'worried-face',
+  'slightly-frowning-face',
+  'frowning-face',
+  'face-with-open-mouth',
+  'hushed-face',
+  'astonished-face',
+  'flushed-face',
+  'frowning-face-with-open-mouth',
+  'anguished-face',
+  'fearful-face',
+  'anxious-face-with-sweat',
+  'sad-but-relieved-face',
+  'crying-face',
+  'loudly-crying-face',
+  'face-screaming-in-fear',
+  'confounded-face',
+  'persevering-face',
+  'disappointed-face',
+  'downcast-face-with-sweat',
+  'weary-face',
+  'tired-face',
+  'face-with-steam-from-nose',
+  'pouting-face',
+  'angry-face',
+  'smiling-face-with-horns',
+  'angry-face-with-horns',
+  'skull',
+  'skull-and-crossbones',
+  'pile-of-poo',
+  'clown-face',
+  'ogre',
+  'goblin',
+  'ghost',
   'alien',
   'alien-monster',
-  'ambulance',
-  'american-football',
-  'amphora',
-  'anchor',
+  'see-no-evil-monkey',
+  'hear-no-evil-monkey',
+  'speak-no-evil-monkey',
+  'kiss-mark',
+  'love-letter',
+  'heart-with-arrow',
+  'heart-with-ribbon',
+  'sparkling-heart',
+  'growing-heart',
+  'beating-heart',
+  'revolving-hearts',
+  'two-hearts',
+  'heart-decoration',
+  'broken-heart',
+  'red-heart',
+  'yellow-heart',
+  'green-heart',
+  'blue-heart',
+  'purple-heart',
+  'black-heart',
+  'hundred-points',
   'anger-symbol',
-  'angry-face',
-  'angry-face-with-horns',
-  'anguished-face',
-  'ant',
-  'antenna-bars',
-  'anxious-face-with-sweat',
-  'aquarius',
-  'aries',
-  'articulated-lorry',
-  'artist-palette',
-  'asterisk',
-  'astonished-face',
-  'atm-sign',
-  'atom-symbol',
-  'automobile',
-  'avocado',
-  'b-button',
-  'baby',
-  'baby-angel',
-  'baby-angel-dark-skin-tone',
-  'baby-angel-light-skin-tone',
-  'baby-angel-medium-dark-skin-tone',
-  'baby-angel-medium-light-skin-tone',
-  'baby-angel-medium-skin-tone',
-  'baby-bottle',
-  'baby-chick',
-  'baby-dark-skin-tone',
-  'baby-light-skin-tone',
-  'baby-medium-dark-skin-tone',
-  'baby-medium-light-skin-tone',
-  'baby-medium-skin-tone',
-  'baby-symbol',
-  'back-arrow',
-  'backhand-index-pointing-down',
-  'backhand-index-pointing-down-dark-skin-tone',
-  'backhand-index-pointing-down-light-skin-tone',
-  'backhand-index-pointing-down-medium-dark-skin-tone',
-  'backhand-index-pointing-down-medium-light-skin-tone',
-  'backhand-index-pointing-down-medium-skin-tone',
+  'collision',
+  'dizzy',
+  'sweat-droplets',
+  'dashing-away',
+  'hole',
+  'bomb',
+  'speech-balloon',
+  'eye-in-speech-bubble',
+  'left-speech-bubble',
+  'right-anger-bubble',
+  'thought-balloon',
+  'zzz',
+  'waving-hand',
+  'waving-hand-light-skin-tone',
+  'waving-hand-medium-light-skin-tone',
+  'waving-hand-medium-skin-tone',
+  'waving-hand-medium-dark-skin-tone',
+  'waving-hand-dark-skin-tone',
+  'raised-back-of-hand',
+  'raised-back-of-hand-light-skin-tone',
+  'raised-back-of-hand-medium-light-skin-tone',
+  'raised-back-of-hand-medium-skin-tone',
+  'raised-back-of-hand-medium-dark-skin-tone',
+  'raised-back-of-hand-dark-skin-tone',
+  'hand-with-fingers-splayed',
+  'hand-with-fingers-splayed-light-skin-tone',
+  'hand-with-fingers-splayed-medium-light-skin-tone',
+  'hand-with-fingers-splayed-medium-skin-tone',
+  'hand-with-fingers-splayed-medium-dark-skin-tone',
+  'hand-with-fingers-splayed-dark-skin-tone',
+  'raised-hand',
+  'raised-hand-light-skin-tone',
+  'raised-hand-medium-light-skin-tone',
+  'raised-hand-medium-skin-tone',
+  'raised-hand-medium-dark-skin-tone',
+  'raised-hand-dark-skin-tone',
+  'vulcan-salute',
+  'vulcan-salute-light-skin-tone',
+  'vulcan-salute-medium-light-skin-tone',
+  'vulcan-salute-medium-skin-tone',
+  'vulcan-salute-medium-dark-skin-tone',
+  'vulcan-salute-dark-skin-tone',
+  'ok-hand',
+  'ok-hand-light-skin-tone',
+  'ok-hand-medium-light-skin-tone',
+  'ok-hand-medium-skin-tone',
+  'ok-hand-medium-dark-skin-tone',
+  'ok-hand-dark-skin-tone',
+  'victory-hand',
+  'victory-hand-light-skin-tone',
+  'victory-hand-medium-light-skin-tone',
+  'victory-hand-medium-skin-tone',
+  'victory-hand-medium-dark-skin-tone',
+  'victory-hand-dark-skin-tone',
+  'crossed-fingers',
+  'crossed-fingers-light-skin-tone',
+  'crossed-fingers-medium-light-skin-tone',
+  'crossed-fingers-medium-skin-tone',
+  'crossed-fingers-medium-dark-skin-tone',
+  'crossed-fingers-dark-skin-tone',
+  'sign-of-the-horns',
+  'sign-of-the-horns-light-skin-tone',
+  'sign-of-the-horns-medium-light-skin-tone',
+  'sign-of-the-horns-medium-skin-tone',
+  'sign-of-the-horns-medium-dark-skin-tone',
+  'sign-of-the-horns-dark-skin-tone',
+  'call-me-hand',
+  'call-me-hand-light-skin-tone',
+  'call-me-hand-medium-light-skin-tone',
+  'call-me-hand-medium-skin-tone',
+  'call-me-hand-medium-dark-skin-tone',
+  'call-me-hand-dark-skin-tone',
   'backhand-index-pointing-left',
-  'backhand-index-pointing-left-dark-skin-tone',
   'backhand-index-pointing-left-light-skin-tone',
-  'backhand-index-pointing-left-medium-dark-skin-tone',
   'backhand-index-pointing-left-medium-light-skin-tone',
   'backhand-index-pointing-left-medium-skin-tone',
+  'backhand-index-pointing-left-medium-dark-skin-tone',
+  'backhand-index-pointing-left-dark-skin-tone',
   'backhand-index-pointing-right',
-  'backhand-index-pointing-right-dark-skin-tone',
   'backhand-index-pointing-right-light-skin-tone',
-  'backhand-index-pointing-right-medium-dark-skin-tone',
   'backhand-index-pointing-right-medium-light-skin-tone',
   'backhand-index-pointing-right-medium-skin-tone',
+  'backhand-index-pointing-right-medium-dark-skin-tone',
+  'backhand-index-pointing-right-dark-skin-tone',
   'backhand-index-pointing-up',
-  'backhand-index-pointing-up-dark-skin-tone',
   'backhand-index-pointing-up-light-skin-tone',
-  'backhand-index-pointing-up-medium-dark-skin-tone',
   'backhand-index-pointing-up-medium-light-skin-tone',
   'backhand-index-pointing-up-medium-skin-tone',
-  'backpack',
-  'bacon',
-  'badminton',
-  'baggage-claim',
-  'baguette-bread',
-  'balance-scale',
-  'balloon',
-  'ballot-box-with-ballot',
-  'ballot-box-with-check',
-  'banana',
-  'bank',
-  'bar-chart',
-  'barber-pole',
-  'baseball',
-  'basketball',
-  'bat',
-  'bathtub',
-  'battery',
-  'beach-with-umbrella',
-  'beaming-face-with-smiling-eyes',
-  'bear-face',
-  'beating-heart',
-  'bed',
-  'beer-mug',
-  'bell',
-  'bell-with-slash',
-  'bellhop-bell',
-  'bento-box',
-  'bicycle',
-  'bikini',
-  'biohazard',
-  'bird',
-  'birthday-cake',
-  'black-circle',
-  'black-heart',
-  'black-large-square',
-  'black-medium-small-square',
-  'black-medium-square',
-  'black-nib',
-  'black-small-square',
-  'black-square-button',
-  'blond-haired-person',
-  'blond-haired-person-dark-skin-tone',
-  'blond-haired-person-light-skin-tone',
-  'blond-haired-person-medium-dark-skin-tone',
-  'blond-haired-person-medium-light-skin-tone',
-  'blond-haired-person-medium-skin-tone',
-  'blossom',
-  'blowfish',
-  'blue-book',
-  'blue-circle',
-  'blue-heart',
-  'boar',
-  'bomb',
-  'bookmark',
-  'bookmark-tabs',
-  'books',
-  'bottle-with-popping-cork',
-  'bouquet',
-  'bow-and-arrow',
-  'bowling',
-  'boxing-glove',
-  'boy',
-  'boy-dark-skin-tone',
-  'boy-light-skin-tone',
-  'boy-medium-dark-skin-tone',
-  'boy-medium-light-skin-tone',
-  'boy-medium-skin-tone',
-  'bread',
-  'bride-with-veil',
-  'bride-with-veil-dark-skin-tone',
-  'bride-with-veil-light-skin-tone',
-  'bride-with-veil-medium-dark-skin-tone',
-  'bride-with-veil-medium-light-skin-tone',
-  'bride-with-veil-medium-skin-tone',
-  'bridge-at-night',
-  'briefcase',
-  'bright-button',
-  'broken-heart',
-  'bug',
-  'building-construction',
-  'bullet-train',
-  'burrito',
-  'bus',
-  'bus-stop',
-  'bust-in-silhouette',
-  'busts-in-silhouette',
-  'butterfly',
-  'cactus',
-  'calendar',
-  'call-me-hand',
-  'call-me-hand-dark-skin-tone',
-  'call-me-hand-light-skin-tone',
-  'call-me-hand-medium-dark-skin-tone',
-  'call-me-hand-medium-light-skin-tone',
-  'call-me-hand-medium-skin-tone',
-  'camel',
-  'camera',
-  'camera-with-flash',
-  'camping',
-  'cancer',
-  'candle',
-  'candy',
-  'canoe',
-  'capricorn',
-  'card-file-box',
-  'card-index',
-  'card-index-dividers',
-  'carousel-horse',
-  'carp-streamer',
-  'carrot',
-  'castle',
-  'cat',
-  'cat-face',
-  'cat-face-with-tears-of-joy',
-  'cat-face-with-wry-smile',
-  'chains',
-  'chart-decreasing',
-  'chart-increasing',
-  'chart-increasing-with-yen',
-  'cheese-wedge',
-  'cherries',
-  'cherry-blossom',
-  'chestnut',
-  'chicken',
-  'children-crossing',
-  'chipmunk',
-  'chocolate-bar',
-  'christmas-tree',
-  'church',
-  'cigarette',
-  'cinema',
-  'circled-m',
-  'circus-tent',
-  'cityscape',
-  'cityscape-at-dusk',
-  'cl-button',
-  'clamp',
-  'clapper-board',
-  'clapping-hands',
-  'clapping-hands-dark-skin-tone',
-  'clapping-hands-light-skin-tone',
-  'clapping-hands-medium-dark-skin-tone',
-  'clapping-hands-medium-light-skin-tone',
-  'clapping-hands-medium-skin-tone',
-  'classical-building',
-  'clinking-beer-mugs',
-  'clinking-glasses',
-  'clipboard',
-  'clockwise-vertical-arrows',
-  'closed-book',
-  'closed-mailbox-with-lowered-flag',
-  'closed-mailbox-with-raised-flag',
-  'closed-umbrella',
-  'cloud',
-  'cloud-with-lightning',
-  'cloud-with-lightning-and-rain',
-  'cloud-with-rain',
-  'cloud-with-snow',
-  'clown-face',
-  'club-suit',
-  'clutch-bag',
-  'cocktail-glass',
-  'coffin',
-  'collision',
-  'comet',
-  'computer-disk',
-  'computer-mouse',
-  'confetti-ball',
-  'confounded-face',
-  'confused-face',
-  'construction',
-  'construction-worker',
-  'construction-worker-dark-skin-tone',
-  'construction-worker-light-skin-tone',
-  'construction-worker-medium-dark-skin-tone',
-  'construction-worker-medium-light-skin-tone',
-  'construction-worker-medium-skin-tone',
-  'control-knobs',
-  'convenience-store',
-  'cooked-rice',
-  'cookie',
-  'cooking',
-  'cool-button',
-  'copyright',
-  'couch-and-lamp',
-  'counterclockwise-arrows-button',
-  'couple-with-heart',
-  'couple-with-heart-man-man',
-  'couple-with-heart-woman-woman',
-  'cow',
-  'cow-face',
-  'cowboy-hat-face',
-  'crab',
-  'crayon',
-  'credit-card',
-  'crescent-moon',
-  'cricket-game',
-  'crocodile',
-  'croissant',
-  'cross-mark',
-  'cross-mark-button',
-  'crossed-fingers',
-  'crossed-fingers-dark-skin-tone',
-  'crossed-fingers-light-skin-tone',
-  'crossed-fingers-medium-dark-skin-tone',
-  'crossed-fingers-medium-light-skin-tone',
-  'crossed-fingers-medium-skin-tone',
-  'crossed-swords',
-  'crown',
-  'crying-cat-face',
-  'crying-face',
-  'crystal-ball',
-  'cucumber',
-  'curly-loop',
-  'currency-exchange',
-  'curry-rice',
-  'custard',
-  'customs',
-  'cyclone',
-  'dagger',
-  'dango',
-  'dark-skin-tone',
-  'dashing-away',
-  'deciduous-tree',
-  'deer',
-  'delivery-truck',
-  'department-store',
-  'derelict-house',
-  'desert',
-  'desert-island',
-  'desktop-computer',
-  'detective',
-  'detective-dark-skin-tone',
-  'detective-light-skin-tone',
-  'detective-medium-dark-skin-tone',
-  'detective-medium-light-skin-tone',
-  'detective-medium-skin-tone',
-  'diamond-suit',
-  'diamond-with-a-dot',
-  'digit-eight',
-  'digit-five',
-  'digit-four',
-  'digit-nine',
-  'digit-one',
-  'digit-seven',
-  'digit-six',
-  'digit-three',
-  'digit-two',
-  'digit-zero',
-  'dim-button',
-  'direct-hit',
-  'disappointed-face',
-  'dizzy',
-  'dizzy-face',
-  'dog',
-  'dog-face',
-  'dollar-banknote',
-  'dolphin',
-  'door',
-  'dotted-six-pointed-star',
-  'double-curly-loop',
-  'double-exclamation-mark',
-  'doughnut',
-  'dove',
-  'down-arrow',
-  'down-left-arrow',
-  'down-right-arrow',
-  'downcast-face-with-sweat',
-  'downwards-button',
-  'dragon',
-  'dragon-face',
-  'dress',
-  'drooling-face',
-  'droplet',
-  'drum',
-  'duck',
-  'dvd',
-  'e-mail',
-  'eagle',
-  'ear',
-  'ear-dark-skin-tone',
-  'ear-light-skin-tone',
-  'ear-medium-dark-skin-tone',
-  'ear-medium-light-skin-tone',
-  'ear-medium-skin-tone',
-  'ear-of-corn',
-  'egg',
-  'eggplant',
-  'eight-oclock',
-  'eight-pointed-star',
-  'eight-spoked-asterisk',
-  'eight-thirty',
-  'eject-button',
-  'electric-plug',
-  'elephant',
-  'eleven-oclock',
-  'eleven-thirty',
-  'end-arrow',
-  'envelope',
-  'envelope-with-arrow',
-  'euro-banknote',
-  'evergreen-tree',
-  'ewe',
-  'exclamation-mark',
-  'exclamation-question-mark',
-  'expressionless-face',
-  'eye',
-  'eye-in-speech-bubble',
-  'eyes',
-  'face-blowing-a-kiss',
-  'face-savoring-food',
-  'face-screaming-in-fear',
-  'face-with-head-bandage',
-  'face-with-medical-mask',
-  'face-with-open-mouth',
-  'face-with-rolling-eyes',
-  'face-with-steam-from-nose',
-  'face-with-tears-of-joy',
-  'face-with-thermometer',
-  'face-with-tongue',
-  'face-without-mouth',
-  'factory',
-  'fallen-leaf',
-  'family',
-  'family-man-man-boy',
-  'family-man-man-boy-boy',
-  'family-man-man-girl',
-  'family-man-man-girl-boy',
-  'family-man-man-girl-girl',
-  'family-man-woman-boy-boy',
-  'family-man-woman-girl',
-  'family-man-woman-girl-boy',
-  'family-man-woman-girl-girl',
-  'family-woman-woman-boy',
-  'family-woman-woman-boy-boy',
-  'family-woman-woman-girl',
-  'family-woman-woman-girl-boy',
-  'family-woman-woman-girl-girl',
-  'fast-down-button',
-  'fast-forward-button',
-  'fast-reverse-button',
-  'fast-up-button',
-  'fax-machine',
-  'fearful-face',
-  'ferris-wheel',
-  'ferry',
-  'field-hockey',
-  'file-cabinet',
-  'file-folder',
-  'film-frames',
-  'film-projector',
-  'fire',
-  'fire-engine',
-  'fireworks',
-  'first-quarter-moon',
-  'first-quarter-moon-face',
-  'fish',
-  'fish-cake-with-swirl',
-  'fishing-pole',
-  'five-oclock',
-  'five-thirty',
-  'flag-england',
-  'flag-for-afghanistan',
-  'flag-for-aland-islands',
-  'flag-for-albania',
-  'flag-for-algeria',
-  'flag-for-american-samoa',
-  'flag-for-andorra',
-  'flag-for-angola',
-  'flag-for-anguilla',
-  'flag-for-antarctica',
-  'flag-for-antigua-and-barbuda',
-  'flag-for-argentina',
-  'flag-for-armenia',
-  'flag-for-aruba',
-  'flag-for-ascension-island',
-  'flag-for-australia',
-  'flag-for-austria',
-  'flag-for-azerbaijan',
-  'flag-for-bahamas',
-  'flag-for-bahrain',
-  'flag-for-bangladesh',
-  'flag-for-barbados',
-  'flag-for-belarus',
-  'flag-for-belgium',
-  'flag-for-belize',
-  'flag-for-benin',
-  'flag-for-bermuda',
-  'flag-for-bhutan',
-  'flag-for-black-flag',
-  'flag-for-bolivia',
-  'flag-for-bosnia-and-herzegovina',
-  'flag-for-botswana',
-  'flag-for-bouvet-island',
-  'flag-for-brazil',
-  'flag-for-british-indian-ocean-territory',
-  'flag-for-british-virgin-islands',
-  'flag-for-brunei',
-  'flag-for-bulgaria',
-  'flag-for-burkina-faso',
-  'flag-for-burundi',
-  'flag-for-cambodia',
-  'flag-for-cameroon',
-  'flag-for-canada',
-  'flag-for-canary-islands',
-  'flag-for-cape-verde',
-  'flag-for-caribbean-netherlands',
-  'flag-for-cayman-islands',
-  'flag-for-central-african-republic',
-  'flag-for-ceuta-and-melilla',
-  'flag-for-chad',
-  'flag-for-chequered-flag',
-  'flag-for-chile',
-  'flag-for-china',
-  'flag-for-christmas-island',
-  'flag-for-clipperton-island',
-  'flag-for-cocos-islands',
-  'flag-for-colombia',
-  'flag-for-comoros',
-  'flag-for-congo-brazzaville',
-  'flag-for-congo-kinshasa',
-  'flag-for-cook-islands',
-  'flag-for-costa-rica',
-  'flag-for-cote-divoire',
-  'flag-for-croatia',
-  'flag-for-crossed-flags',
-  'flag-for-cuba',
-  'flag-for-curacao',
-  'flag-for-cyprus',
-  'flag-for-czechia',
-  'flag-for-denmark',
-  'flag-for-diego-garcia',
-  'flag-for-djibouti',
-  'flag-for-dominica',
-  'flag-for-dominican-republic',
-  'flag-for-ecuador',
-  'flag-for-egypt',
-  'flag-for-el-salvador',
-  'flag-for-equatorial-guinea',
-  'flag-for-eritrea',
-  'flag-for-estonia',
-  'flag-for-ethiopia',
-  'flag-for-european-union',
-  'flag-for-falkland-islands',
-  'flag-for-faroe-islands',
-  'flag-for-fiji',
-  'flag-for-finland',
-  'flag-for-france',
-  'flag-for-french-guiana',
-  'flag-for-french-polynesia',
-  'flag-for-french-southern-territories',
-  'flag-for-gabon',
-  'flag-for-gambia',
-  'flag-for-georgia',
-  'flag-for-germany',
-  'flag-for-ghana',
-  'flag-for-gibraltar',
-  'flag-for-greece',
-  'flag-for-greenland',
-  'flag-for-grenada',
-  'flag-for-guadeloupe',
-  'flag-for-guam',
-  'flag-for-guatemala',
-  'flag-for-guernsey',
-  'flag-for-guinea',
-  'flag-for-guinea-bissau',
-  'flag-for-guyana',
-  'flag-for-haiti',
-  'flag-for-heard-and-mcdonald-islands',
-  'flag-for-honduras',
-  'flag-for-hong-kong-sar-china',
-  'flag-for-hungary',
-  'flag-for-iceland',
-  'flag-for-india',
-  'flag-for-indonesia',
-  'flag-for-iran',
-  'flag-for-iraq',
-  'flag-for-ireland',
-  'flag-for-isle-of-man',
-  'flag-for-israel',
-  'flag-for-italy',
-  'flag-for-jamaica',
-  'flag-for-japan',
-  'flag-for-jersey',
-  'flag-for-jordan',
-  'flag-for-kazakhstan',
-  'flag-for-kenya',
-  'flag-for-kiribati',
-  'flag-for-kosovo',
-  'flag-for-kuwait',
-  'flag-for-kyrgyzstan',
-  'flag-for-laos',
-  'flag-for-latvia',
-  'flag-for-lebanon',
-  'flag-for-lesotho',
-  'flag-for-liberia',
-  'flag-for-libya',
-  'flag-for-liechtenstein',
-  'flag-for-lithuania',
-  'flag-for-luxembourg',
-  'flag-for-macau-sar-china',
-  'flag-for-macedonia',
-  'flag-for-madagascar',
-  'flag-for-malawi',
-  'flag-for-malaysia',
-  'flag-for-maldives',
-  'flag-for-mali',
-  'flag-for-malta',
-  'flag-for-marshall-islands',
-  'flag-for-martinique',
-  'flag-for-mauritania',
-  'flag-for-mauritius',
-  'flag-for-mayotte',
-  'flag-for-mexico',
-  'flag-for-micronesia',
-  'flag-for-moldova',
-  'flag-for-monaco',
-  'flag-for-mongolia',
-  'flag-for-montenegro',
-  'flag-for-montserrat',
-  'flag-for-morocco',
-  'flag-for-mozambique',
-  'flag-for-myanmar',
-  'flag-for-namibia',
-  'flag-for-nauru',
-  'flag-for-nepal',
-  'flag-for-netherlands',
-  'flag-for-new-caledonia',
-  'flag-for-new-zealand',
-  'flag-for-nicaragua',
-  'flag-for-niger',
-  'flag-for-nigeria',
-  'flag-for-niue',
-  'flag-for-norfolk-island',
-  'flag-for-north-korea',
-  'flag-for-northern-mariana-islands',
-  'flag-for-norway',
-  'flag-for-oman',
-  'flag-for-pakistan',
-  'flag-for-palau',
-  'flag-for-palestinian-territories',
-  'flag-for-panama',
-  'flag-for-papua-new-guinea',
-  'flag-for-paraguay',
-  'flag-for-peru',
-  'flag-for-philippines',
-  'flag-for-pitcairn-islands',
-  'flag-for-poland',
-  'flag-for-portugal',
-  'flag-for-puerto-rico',
-  'flag-for-qatar',
-  'flag-for-rainbow-flag',
-  'flag-for-reunion',
-  'flag-for-romania',
-  'flag-for-russia',
-  'flag-for-rwanda',
-  'flag-for-samoa',
-  'flag-for-san-marino',
-  'flag-for-sao-tome-and-principe',
-  'flag-for-saudi-arabia',
-  'flag-for-senegal',
-  'flag-for-serbia',
-  'flag-for-seychelles',
-  'flag-for-sierra-leone',
-  'flag-for-singapore',
-  'flag-for-sint-maarten',
-  'flag-for-slovakia',
-  'flag-for-slovenia',
-  'flag-for-solomon-islands',
-  'flag-for-somalia',
-  'flag-for-south-africa',
-  'flag-for-south-georgia-and-south-sandwich-islands',
-  'flag-for-south-korea',
-  'flag-for-south-sudan',
-  'flag-for-spain',
-  'flag-for-sri-lanka',
-  'flag-for-st-barthelemy',
-  'flag-for-st-helena',
-  'flag-for-st-kitts-and-nevis',
-  'flag-for-st-lucia',
-  'flag-for-st-martin',
-  'flag-for-st-pierre-and-miquelon',
-  'flag-for-st-vincent-and-grenadines',
-  'flag-for-sudan',
-  'flag-for-suriname',
-  'flag-for-svalbard-and-jan-mayen',
-  'flag-for-swaziland',
-  'flag-for-sweden',
-  'flag-for-switzerland',
-  'flag-for-syria',
-  'flag-for-taiwan',
-  'flag-for-tajikistan',
-  'flag-for-tanzania',
-  'flag-for-thailand',
-  'flag-for-timor-leste',
-  'flag-for-togo',
-  'flag-for-tokelau',
-  'flag-for-tonga',
-  'flag-for-triangular-flag',
-  'flag-for-trinidad-and-tobago',
-  'flag-for-tristan-da-cunha',
-  'flag-for-tunisia',
-  'flag-for-turkey',
-  'flag-for-turkmenistan',
-  'flag-for-turks-and-caicos-islands',
-  'flag-for-tuvalu',
-  'flag-for-uganda',
-  'flag-for-ukraine',
-  'flag-for-united-arab-emirates',
-  'flag-for-united-kingdom',
-  'flag-for-united-states',
-  'flag-for-uruguay',
-  'flag-for-us-outlying-islands',
-  'flag-for-us-virgin-islands',
-  'flag-for-uzbekistan',
-  'flag-for-vanuatu',
-  'flag-for-vatican-city',
-  'flag-for-venezuela',
-  'flag-for-vietnam',
-  'flag-for-wallis-and-futuna',
-  'flag-for-western-sahara',
-  'flag-for-white-flag',
-  'flag-for-yemen',
-  'flag-for-zambia',
-  'flag-for-zimbabwe',
-  'flag-in-hole',
-  'flag-scotland',
-  'flashlight',
-  'fleur-de-lis',
-  'flexed-biceps',
-  'flexed-biceps-dark-skin-tone',
-  'flexed-biceps-light-skin-tone',
-  'flexed-biceps-medium-dark-skin-tone',
-  'flexed-biceps-medium-light-skin-tone',
-  'flexed-biceps-medium-skin-tone',
-  'floppy-disk',
-  'flower-playing-cards',
-  'flushed-face',
-  'fog',
-  'foggy',
-  'folded-hands',
-  'folded-hands-dark-skin-tone',
-  'folded-hands-light-skin-tone',
-  'folded-hands-medium-dark-skin-tone',
-  'folded-hands-medium-light-skin-tone',
-  'folded-hands-medium-skin-tone',
-  'footprints',
-  'fork-and-knife',
-  'fork-and-knife-with-plate',
-  'fountain',
-  'fountain-pen',
-  'four-leaf-clover',
-  'four-oclock',
-  'four-thirty',
-  'fox',
-  'framed-picture',
-  'free-button',
-  'french-fries',
-  'fried-shrimp',
-  'frog-face',
-  'front-facing-baby-chick',
-  'frowning-face',
-  'frowning-face-with-open-mouth',
-  'fuel-pump',
-  'full-moon',
-  'full-moon-face',
-  'funeral-urn',
-  'game-die',
-  'gear',
-  'gem-stone',
-  'gemini',
-  'ghost',
-  'girl',
-  'girl-dark-skin-tone',
-  'girl-light-skin-tone',
-  'girl-medium-dark-skin-tone',
-  'girl-medium-light-skin-tone',
-  'girl-medium-skin-tone',
-  'glass-of-milk',
-  'glasses',
-  'globe-showing-americas',
-  'globe-showing-asia-australia',
-  'globe-showing-europe-africa',
-  'globe-with-meridians',
-  'glowing-star',
-  'goal-net',
-  'goat',
-  'goblin',
-  'gorilla',
-  'graduation-cap',
-  'grapes',
-  'green-apple',
-  'green-book',
-  'green-heart',
-  'green-salad',
-  'grimacing-face',
-  'grinning-cat-face',
-  'grinning-cat-face-with-smiling-eyes',
-  'grinning-face',
-  'grinning-face-with-big-eyes',
-  'grinning-face-with-smiling-eyes',
-  'grinning-face-with-sweat',
-  'grinning-squinting-face',
-  'growing-heart',
-  'guard',
-  'guard-dark-skin-tone',
-  'guard-light-skin-tone',
-  'guard-medium-dark-skin-tone',
-  'guard-medium-light-skin-tone',
-  'guard-medium-skin-tone',
-  'guitar',
-  'hamburger',
-  'hammer',
-  'hammer-and-pick',
-  'hammer-and-wrench',
-  'hamster-face',
-  'hand-with-fingers-splayed',
-  'hand-with-fingers-splayed-dark-skin-tone',
-  'hand-with-fingers-splayed-light-skin-tone',
-  'hand-with-fingers-splayed-medium-dark-skin-tone',
-  'hand-with-fingers-splayed-medium-light-skin-tone',
-  'hand-with-fingers-splayed-medium-skin-tone',
-  'handbag',
-  'handshake',
-  'handshake-dark-skin-tone',
-  'handshake-light-skin-tone',
-  'handshake-medium-dark-skin-tone',
-  'handshake-medium-light-skin-tone',
-  'handshake-medium-skin-tone',
-  'hatching-chick',
-  'headphone',
-  'hear-no-evil-monkey',
-  'heart-decoration',
-  'heart-suit',
-  'heart-with-arrow',
-  'heart-with-ribbon',
-  'heavy-check-mark',
-  'heavy-division-sign',
-  'heavy-dollar-sign',
-  'heavy-heart-exclamation',
-  'heavy-large-circle',
-  'heavy-minus-sign',
-  'heavy-multiplication-x',
-  'heavy-plus-sign',
-  'helicopter',
-  'herb',
-  'hibiscus',
-  'high-heeled-shoe',
-  'high-speed-train',
-  'high-voltage',
-  'hole',
-  'honey-pot',
-  'honeybee',
-  'horizontal-traffic-light',
-  'horse',
-  'horse-face',
-  'horse-racing',
-  'horse-racing-dark-skin-tone',
-  'horse-racing-light-skin-tone',
-  'horse-racing-medium-dark-skin-tone',
-  'horse-racing-medium-light-skin-tone',
-  'horse-racing-medium-skin-tone',
-  'hospital',
-  'hot-beverage',
-  'hot-dog',
-  'hot-pepper',
-  'hot-springs',
-  'hotel',
-  'hourglass-done',
-  'hourglass-not-done',
-  'house',
-  'house-with-garden',
-  'houses',
-  'hugging-face',
-  'hundred-points',
-  'hushed-face',
-  'ice-cream',
-  'ice-hockey',
-  'ice-skate',
-  'id-button',
-  'inbox-tray',
-  'incoming-envelope',
-  'index-pointing-up',
-  'index-pointing-up-dark-skin-tone',
-  'index-pointing-up-light-skin-tone',
-  'index-pointing-up-medium-dark-skin-tone',
-  'index-pointing-up-medium-light-skin-tone',
-  'index-pointing-up-medium-skin-tone',
-  'information',
-  'input-latin-letters',
-  'input-latin-lowercase',
-  'input-latin-uppercase',
-  'input-numbers',
-  'input-symbols',
-  'jack-o-lantern',
-  'japanese-acceptable-button',
-  'japanese-application-button',
-  'japanese-bargain-button',
-  'japanese-castle',
-  'japanese-congratulations-button',
-  'japanese-discount-button',
-  'japanese-dolls',
-  'japanese-free-of-charge-button',
-  'japanese-here-button',
-  'japanese-monthly-amount-button',
-  'japanese-no-vacancy-button',
-  'japanese-not-free-of-charge-button',
-  'japanese-open-for-business-button',
-  'japanese-passing-grade-button',
-  'japanese-post-office',
-  'japanese-prohibited-button',
-  'japanese-reserved-button',
-  'japanese-secret-button',
-  'japanese-service-charge-button',
-  'japanese-symbol-for-beginner',
-  'japanese-vacancy-button',
-  'jeans',
-  'joker',
-  'joystick',
-  'kaaba',
-  'key',
-  'keyboard',
-  'keycap-0',
-  'keycap-1',
-  'keycap-10',
-  'keycap-2',
-  'keycap-3',
-  'keycap-4',
-  'keycap-5',
-  'keycap-6',
-  'keycap-7',
-  'keycap-8',
-  'keycap-9',
-  'keycap-asterisk',
-  'keycap-pound',
-  'kick-scooter',
-  'kimono',
-  'kiss',
-  'kiss-man-man',
-  'kiss-mark',
-  'kiss-woman-woman',
-  'kissing-cat-face',
-  'kissing-face',
-  'kissing-face-with-closed-eyes',
-  'kissing-face-with-smiling-eyes',
-  'kitchen-knife',
-  'kiwi-fruit',
-  'koala',
-  'label',
-  'lady-beetle',
-  'laptop-computer',
-  'large-blue-diamond',
-  'large-orange-diamond',
-  'last-quarter-moon',
-  'last-quarter-moon-face',
-  'last-track-button',
-  'latin-cross',
-  'leaf-fluttering-in-wind',
-  'ledger',
-  'left-arrow',
-  'left-arrow-curving-right',
-  'left-facing-fist',
-  'left-facing-fist-dark-skin-tone',
-  'left-facing-fist-light-skin-tone',
-  'left-facing-fist-medium-dark-skin-tone',
-  'left-facing-fist-medium-light-skin-tone',
-  'left-facing-fist-medium-skin-tone',
-  'left-luggage',
-  'left-right-arrow',
-  'left-speech-bubble',
-  'lemon',
-  'leo',
-  'leopard',
-  'letter-a',
-  'letter-b',
-  'letter-c',
-  'letter-d',
-  'letter-e',
-  'letter-f',
-  'letter-g',
-  'letter-h',
-  'letter-i',
-  'letter-j',
-  'letter-k',
-  'letter-l',
-  'letter-m',
-  'letter-n',
-  'letter-o',
-  'letter-p',
-  'letter-q',
-  'letter-r',
-  'letter-s',
-  'letter-t',
-  'letter-u',
-  'letter-v',
-  'letter-w',
-  'letter-x',
-  'letter-y',
-  'letter-z',
-  'level-slider',
-  'libra',
-  'light-bulb',
-  'light-rail',
-  'light-skin-tone',
-  'link',
-  'linked-paperclips',
-  'lion-face',
-  'lipstick',
-  'litter-in-bin-sign',
-  'lizard',
-  'locked',
-  'locked-with-key',
-  'locked-with-pen',
-  'locomotive',
-  'lollipop',
-  'loudly-crying-face',
-  'loudspeaker',
-  'love-hotel',
-  'love-letter',
-  'lying-face',
-  'magnifying-glass-tilted-left',
-  'magnifying-glass-tilted-right',
-  'mahjong-red-dragon',
-  'man',
-  'man-and-woman-holding-hands',
-  'man-dancing',
-  'man-dancing-dark-skin-tone',
-  'man-dancing-light-skin-tone',
-  'man-dancing-medium-dark-skin-tone',
-  'man-dancing-medium-light-skin-tone',
-  'man-dancing-medium-skin-tone',
-  'man-dark-skin-tone',
-  'man-in-suit-levitating',
-  'man-in-tuxedo',
-  'man-in-tuxedo-dark-skin-tone',
-  'man-in-tuxedo-light-skin-tone',
-  'man-in-tuxedo-medium-dark-skin-tone',
-  'man-in-tuxedo-medium-light-skin-tone',
-  'man-in-tuxedo-medium-skin-tone',
-  'man-light-skin-tone',
-  'man-medium-dark-skin-tone',
-  'man-medium-light-skin-tone',
-  'man-medium-skin-tone',
-  'man-with-chinese-cap',
-  'man-with-chinese-cap-dark-skin-tone',
-  'man-with-chinese-cap-light-skin-tone',
-  'man-with-chinese-cap-medium-dark-skin-tone',
-  'man-with-chinese-cap-medium-light-skin-tone',
-  'man-with-chinese-cap-medium-skin-tone',
-  'mans-shoe',
-  'mantelpiece-clock',
-  'map-of-japan',
-  'maple-leaf',
-  'martial-arts-uniform',
-  'meat-on-bone',
-  'medium-dark-skin-tone',
-  'medium-light-skin-tone',
-  'medium-skin-tone',
-  'megaphone',
-  'melon',
-  'memo',
-  'menorah',
-  'mens-room',
-  'metro',
-  'microphone',
-  'microscope',
+  'backhand-index-pointing-up-medium-dark-skin-tone',
+  'backhand-index-pointing-up-dark-skin-tone',
   'middle-finger',
-  'middle-finger-dark-skin-tone',
   'middle-finger-light-skin-tone',
-  'middle-finger-medium-dark-skin-tone',
   'middle-finger-medium-light-skin-tone',
   'middle-finger-medium-skin-tone',
-  'military-medal',
-  'milky-way',
-  'minibus',
-  'moai',
-  'mobile-phone',
-  'mobile-phone-off',
-  'mobile-phone-with-arrow',
-  'money-bag',
-  'money-mouth-face',
-  'money-with-wings',
-  'monkey',
-  'monkey-face',
-  'monorail',
-  'moon-viewing-ceremony',
-  'mosque',
-  'motor-boat',
-  'motor-scooter',
-  'motorcycle',
-  'motorway',
-  'mount-fuji',
-  'mountain',
-  'mountain-cableway',
-  'mountain-railway',
-  'mouse',
-  'mouse-face',
-  'mouth',
-  'movie-camera',
-  'mrs-claus',
-  'mrs-claus-dark-skin-tone',
-  'mrs-claus-light-skin-tone',
-  'mrs-claus-medium-dark-skin-tone',
-  'mrs-claus-medium-light-skin-tone',
-  'mrs-claus-medium-skin-tone',
-  'mushroom',
-  'musical-keyboard',
-  'musical-note',
-  'musical-notes',
-  'musical-score',
-  'muted-speaker',
-  'nail-polish',
-  'nail-polish-dark-skin-tone',
-  'nail-polish-light-skin-tone',
-  'nail-polish-medium-dark-skin-tone',
-  'nail-polish-medium-light-skin-tone',
-  'nail-polish-medium-skin-tone',
-  'name-badge',
-  'national-park',
-  'nauseated-face',
-  'necktie',
-  'nerd-face',
-  'neutral-face',
-  'new-button',
-  'new-moon',
-  'new-moon-face',
-  'newspaper',
-  'next-track-button',
-  'ng-button',
-  'night-with-stars',
-  'nine-oclock',
-  'nine-thirty',
-  'no-bicycles',
-  'no-entry',
-  'no-littering',
-  'no-mobile-phones',
-  'no-one-under-eighteen',
-  'no-pedestrians',
-  'no-smoking',
-  'non-potable-water',
-  'nose',
-  'nose-dark-skin-tone',
-  'nose-light-skin-tone',
-  'nose-medium-dark-skin-tone',
-  'nose-medium-light-skin-tone',
-  'nose-medium-skin-tone',
-  'notebook',
-  'notebook-with-decorative-cover',
-  'nut-and-bolt',
-  'o-button',
-  'octopus',
-  'oden',
-  'office-building',
-  'ogre',
-  'oil-drum',
-  'ok-button',
-  'ok-hand',
-  'ok-hand-dark-skin-tone',
-  'ok-hand-light-skin-tone',
-  'ok-hand-medium-dark-skin-tone',
-  'ok-hand-medium-light-skin-tone',
-  'ok-hand-medium-skin-tone',
-  'old-key',
-  'old-man',
-  'old-man-dark-skin-tone',
-  'old-man-light-skin-tone',
-  'old-man-medium-dark-skin-tone',
-  'old-man-medium-light-skin-tone',
-  'old-man-medium-skin-tone',
-  'old-woman',
-  'old-woman-dark-skin-tone',
-  'old-woman-light-skin-tone',
-  'old-woman-medium-dark-skin-tone',
-  'old-woman-medium-light-skin-tone',
-  'old-woman-medium-skin-tone',
-  'om',
-  'on-arrow',
-  'oncoming-automobile',
-  'oncoming-bus',
+  'middle-finger-medium-dark-skin-tone',
+  'middle-finger-dark-skin-tone',
+  'backhand-index-pointing-down',
+  'backhand-index-pointing-down-light-skin-tone',
+  'backhand-index-pointing-down-medium-light-skin-tone',
+  'backhand-index-pointing-down-medium-skin-tone',
+  'backhand-index-pointing-down-medium-dark-skin-tone',
+  'backhand-index-pointing-down-dark-skin-tone',
+  'index-pointing-up',
+  'index-pointing-up-light-skin-tone',
+  'index-pointing-up-medium-light-skin-tone',
+  'index-pointing-up-medium-skin-tone',
+  'index-pointing-up-medium-dark-skin-tone',
+  'index-pointing-up-dark-skin-tone',
+  'thumbs-up',
+  'thumbs-up-light-skin-tone',
+  'thumbs-up-medium-light-skin-tone',
+  'thumbs-up-medium-skin-tone',
+  'thumbs-up-medium-dark-skin-tone',
+  'thumbs-up-dark-skin-tone',
+  'thumbs-down',
+  'thumbs-down-light-skin-tone',
+  'thumbs-down-medium-light-skin-tone',
+  'thumbs-down-medium-skin-tone',
+  'thumbs-down-medium-dark-skin-tone',
+  'thumbs-down-dark-skin-tone',
+  'raised-fist',
+  'raised-fist-light-skin-tone',
+  'raised-fist-medium-light-skin-tone',
+  'raised-fist-medium-skin-tone',
+  'raised-fist-medium-dark-skin-tone',
+  'raised-fist-dark-skin-tone',
   'oncoming-fist',
-  'oncoming-fist-dark-skin-tone',
   'oncoming-fist-light-skin-tone',
-  'oncoming-fist-medium-dark-skin-tone',
   'oncoming-fist-medium-light-skin-tone',
   'oncoming-fist-medium-skin-tone',
-  'oncoming-police-car',
-  'oncoming-taxi',
-  'one-oclock',
-  'one-thirty',
-  'open-book',
-  'open-file-folder',
+  'oncoming-fist-medium-dark-skin-tone',
+  'oncoming-fist-dark-skin-tone',
+  'left-facing-fist',
+  'left-facing-fist-light-skin-tone',
+  'left-facing-fist-medium-light-skin-tone',
+  'left-facing-fist-medium-skin-tone',
+  'left-facing-fist-medium-dark-skin-tone',
+  'left-facing-fist-dark-skin-tone',
+  'right-facing-fist',
+  'right-facing-fist-light-skin-tone',
+  'right-facing-fist-medium-light-skin-tone',
+  'right-facing-fist-medium-skin-tone',
+  'right-facing-fist-medium-dark-skin-tone',
+  'right-facing-fist-dark-skin-tone',
+  'clapping-hands',
+  'clapping-hands-light-skin-tone',
+  'clapping-hands-medium-light-skin-tone',
+  'clapping-hands-medium-skin-tone',
+  'clapping-hands-medium-dark-skin-tone',
+  'clapping-hands-dark-skin-tone',
+  'raising-hands',
+  'raising-hands-light-skin-tone',
+  'raising-hands-medium-light-skin-tone',
+  'raising-hands-medium-skin-tone',
+  'raising-hands-medium-dark-skin-tone',
+  'raising-hands-dark-skin-tone',
   'open-hands',
-  'open-hands-dark-skin-tone',
   'open-hands-light-skin-tone',
-  'open-hands-medium-dark-skin-tone',
   'open-hands-medium-light-skin-tone',
   'open-hands-medium-skin-tone',
-  'open-mailbox-with-lowered-flag',
-  'open-mailbox-with-raised-flag',
-  'ophiuchus',
-  'optical-disk',
-  'orange-book',
-  'orthodox-cross',
-  'outbox-tray',
-  'owl',
-  'ox',
-  'p-button',
-  'package',
-  'page-facing-up',
-  'page-with-curl',
-  'pager',
-  'paintbrush',
-  'palm-tree',
-  'pancakes',
-  'panda-face',
-  'paperclip',
-  'part-alternation-mark',
-  'party-popper',
-  'passenger-ship',
-  'passport-control',
-  'pause-button',
-  'paw-prints',
-  'peace-symbol',
-  'peach',
-  'peanuts',
-  'pear',
-  'pen',
-  'pencil',
-  'penguin',
-  'pensive-face',
-  'people-with-bunny-ears',
-  'people-wrestling',
-  'people-wrestling-dark-skin-tone',
-  'people-wrestling-light-skin-tone',
-  'people-wrestling-medium-dark-skin-tone',
-  'people-wrestling-medium-light-skin-tone',
-  'people-wrestling-medium-skin-tone',
-  'performing-arts',
-  'persevering-face',
-  'person-biking',
-  'person-biking-dark-skin-tone',
-  'person-biking-light-skin-tone',
-  'person-biking-medium-dark-skin-tone',
-  'person-biking-medium-light-skin-tone',
-  'person-biking-medium-skin-tone',
-  'person-bouncing-ball',
-  'person-bouncing-ball-dark-skin-tone',
-  'person-bouncing-ball-light-skin-tone',
-  'person-bouncing-ball-medium-dark-skin-tone',
-  'person-bouncing-ball-medium-light-skin-tone',
-  'person-bouncing-ball-medium-skin-tone',
-  'person-bowing',
-  'person-bowing-dark-skin-tone',
-  'person-bowing-light-skin-tone',
-  'person-bowing-medium-dark-skin-tone',
-  'person-bowing-medium-light-skin-tone',
-  'person-bowing-medium-skin-tone',
-  'person-cartwheeling',
-  'person-cartwheeling-dark-skin-tone',
-  'person-cartwheeling-light-skin-tone',
-  'person-cartwheeling-medium-dark-skin-tone',
-  'person-cartwheeling-medium-light-skin-tone',
-  'person-cartwheeling-medium-skin-tone',
-  'person-facepalming',
-  'person-facepalming-dark-skin-tone',
-  'person-facepalming-light-skin-tone',
-  'person-facepalming-medium-dark-skin-tone',
-  'person-facepalming-medium-light-skin-tone',
-  'person-facepalming-medium-skin-tone',
-  'person-fencing',
-  'person-frowning',
-  'person-frowning-dark-skin-tone',
-  'person-frowning-light-skin-tone',
-  'person-frowning-medium-dark-skin-tone',
-  'person-frowning-medium-light-skin-tone',
-  'person-frowning-medium-skin-tone',
-  'person-gesturing-no',
-  'person-gesturing-no-dark-skin-tone',
-  'person-gesturing-no-light-skin-tone',
-  'person-gesturing-no-medium-dark-skin-tone',
-  'person-gesturing-no-medium-light-skin-tone',
-  'person-gesturing-no-medium-skin-tone',
-  'person-gesturing-ok',
-  'person-gesturing-ok-dark-skin-tone',
-  'person-gesturing-ok-light-skin-tone',
-  'person-gesturing-ok-medium-dark-skin-tone',
-  'person-gesturing-ok-medium-light-skin-tone',
-  'person-gesturing-ok-medium-skin-tone',
-  'person-getting-haircut',
-  'person-getting-haircut-dark-skin-tone',
-  'person-getting-haircut-light-skin-tone',
-  'person-getting-haircut-medium-dark-skin-tone',
-  'person-getting-haircut-medium-light-skin-tone',
-  'person-getting-haircut-medium-skin-tone',
-  'person-getting-massage',
-  'person-getting-massage-dark-skin-tone',
-  'person-getting-massage-light-skin-tone',
-  'person-getting-massage-medium-dark-skin-tone',
-  'person-getting-massage-medium-light-skin-tone',
-  'person-getting-massage-medium-skin-tone',
-  'person-golfing',
-  'person-in-bed',
-  'person-juggling',
-  'person-juggling-dark-skin-tone',
-  'person-juggling-light-skin-tone',
-  'person-juggling-medium-dark-skin-tone',
-  'person-juggling-medium-light-skin-tone',
-  'person-juggling-medium-skin-tone',
-  'person-lifting-weights',
-  'person-lifting-weights-dark-skin-tone',
-  'person-lifting-weights-light-skin-tone',
-  'person-lifting-weights-medium-dark-skin-tone',
-  'person-lifting-weights-medium-light-skin-tone',
-  'person-lifting-weights-medium-skin-tone',
-  'person-mountain-biking',
-  'person-mountain-biking-dark-skin-tone',
-  'person-mountain-biking-light-skin-tone',
-  'person-mountain-biking-medium-dark-skin-tone',
-  'person-mountain-biking-medium-light-skin-tone',
-  'person-mountain-biking-medium-skin-tone',
-  'person-playing-handball',
-  'person-playing-handball-dark-skin-tone',
-  'person-playing-handball-light-skin-tone',
-  'person-playing-handball-medium-dark-skin-tone',
-  'person-playing-handball-medium-light-skin-tone',
-  'person-playing-handball-medium-skin-tone',
-  'person-playing-water-polo',
-  'person-playing-water-polo-dark-skin-tone',
-  'person-playing-water-polo-light-skin-tone',
-  'person-playing-water-polo-medium-dark-skin-tone',
-  'person-playing-water-polo-medium-light-skin-tone',
-  'person-playing-water-polo-medium-skin-tone',
+  'open-hands-medium-dark-skin-tone',
+  'open-hands-dark-skin-tone',
+  'handshake',
+  'handshake-light-skin-tone',
+  'handshake-medium-light-skin-tone',
+  'handshake-medium-skin-tone',
+  'handshake-medium-dark-skin-tone',
+  'handshake-dark-skin-tone',
+  'folded-hands',
+  'folded-hands-light-skin-tone',
+  'folded-hands-medium-light-skin-tone',
+  'folded-hands-medium-skin-tone',
+  'folded-hands-medium-dark-skin-tone',
+  'folded-hands-dark-skin-tone',
+  'writing-hand',
+  'writing-hand-light-skin-tone',
+  'writing-hand-medium-light-skin-tone',
+  'writing-hand-medium-skin-tone',
+  'writing-hand-medium-dark-skin-tone',
+  'writing-hand-dark-skin-tone',
+  'nail-polish',
+  'nail-polish-light-skin-tone',
+  'nail-polish-medium-light-skin-tone',
+  'nail-polish-medium-skin-tone',
+  'nail-polish-medium-dark-skin-tone',
+  'nail-polish-dark-skin-tone',
+  'selfie',
+  'selfie-light-skin-tone',
+  'selfie-medium-light-skin-tone',
+  'selfie-medium-skin-tone',
+  'selfie-medium-dark-skin-tone',
+  'selfie-dark-skin-tone',
+  'flexed-biceps',
+  'flexed-biceps-light-skin-tone',
+  'flexed-biceps-medium-light-skin-tone',
+  'flexed-biceps-medium-skin-tone',
+  'flexed-biceps-medium-dark-skin-tone',
+  'flexed-biceps-dark-skin-tone',
+  'ear',
+  'ear-light-skin-tone',
+  'ear-medium-light-skin-tone',
+  'ear-medium-skin-tone',
+  'ear-medium-dark-skin-tone',
+  'ear-dark-skin-tone',
+  'nose',
+  'nose-light-skin-tone',
+  'nose-medium-light-skin-tone',
+  'nose-medium-skin-tone',
+  'nose-medium-dark-skin-tone',
+  'nose-dark-skin-tone',
+  'eyes',
+  'eye',
+  'tongue',
+  'mouth',
+  'baby',
+  'baby-light-skin-tone',
+  'baby-medium-light-skin-tone',
+  'baby-medium-skin-tone',
+  'baby-medium-dark-skin-tone',
+  'baby-dark-skin-tone',
+  'boy',
+  'boy-light-skin-tone',
+  'boy-medium-light-skin-tone',
+  'boy-medium-skin-tone',
+  'boy-medium-dark-skin-tone',
+  'boy-dark-skin-tone',
+  'girl',
+  'girl-light-skin-tone',
+  'girl-medium-light-skin-tone',
+  'girl-medium-skin-tone',
+  'girl-medium-dark-skin-tone',
+  'girl-dark-skin-tone',
+  'man',
+  'man-light-skin-tone',
+  'man-medium-light-skin-tone',
+  'man-medium-skin-tone',
+  'man-medium-dark-skin-tone',
+  'man-dark-skin-tone',
+  'woman',
+  'woman-light-skin-tone',
+  'woman-medium-light-skin-tone',
+  'woman-medium-skin-tone',
+  'woman-medium-dark-skin-tone',
+  'woman-dark-skin-tone',
+  'old-man',
+  'old-man-light-skin-tone',
+  'old-man-medium-light-skin-tone',
+  'old-man-medium-skin-tone',
+  'old-man-medium-dark-skin-tone',
+  'old-man-dark-skin-tone',
+  'old-woman',
+  'old-woman-light-skin-tone',
+  'old-woman-medium-light-skin-tone',
+  'old-woman-medium-skin-tone',
+  'old-woman-medium-dark-skin-tone',
+  'old-woman-dark-skin-tone',
+  'person-frowning',
+  'person-frowning-light-skin-tone',
+  'person-frowning-medium-light-skin-tone',
+  'person-frowning-medium-skin-tone',
+  'person-frowning-medium-dark-skin-tone',
+  'person-frowning-dark-skin-tone',
   'person-pouting',
-  'person-pouting-dark-skin-tone',
   'person-pouting-light-skin-tone',
-  'person-pouting-medium-dark-skin-tone',
   'person-pouting-medium-light-skin-tone',
   'person-pouting-medium-skin-tone',
+  'person-pouting-medium-dark-skin-tone',
+  'person-pouting-dark-skin-tone',
+  'person-gesturing-no',
+  'person-gesturing-no-light-skin-tone',
+  'person-gesturing-no-medium-light-skin-tone',
+  'person-gesturing-no-medium-skin-tone',
+  'person-gesturing-no-medium-dark-skin-tone',
+  'person-gesturing-no-dark-skin-tone',
+  'person-gesturing-ok',
+  'person-gesturing-ok-light-skin-tone',
+  'person-gesturing-ok-medium-light-skin-tone',
+  'person-gesturing-ok-medium-skin-tone',
+  'person-gesturing-ok-medium-dark-skin-tone',
+  'person-gesturing-ok-dark-skin-tone',
+  'person-tipping-hand',
+  'person-tipping-hand-light-skin-tone',
+  'person-tipping-hand-medium-light-skin-tone',
+  'person-tipping-hand-medium-skin-tone',
+  'person-tipping-hand-medium-dark-skin-tone',
+  'person-tipping-hand-dark-skin-tone',
   'person-raising-hand',
-  'person-raising-hand-dark-skin-tone',
   'person-raising-hand-light-skin-tone',
-  'person-raising-hand-medium-dark-skin-tone',
   'person-raising-hand-medium-light-skin-tone',
   'person-raising-hand-medium-skin-tone',
-  'person-rowing-boat',
-  'person-rowing-boat-dark-skin-tone',
-  'person-rowing-boat-light-skin-tone',
-  'person-rowing-boat-medium-dark-skin-tone',
-  'person-rowing-boat-medium-light-skin-tone',
-  'person-rowing-boat-medium-skin-tone',
-  'person-running',
-  'person-running-dark-skin-tone',
-  'person-running-light-skin-tone',
-  'person-running-medium-dark-skin-tone',
-  'person-running-medium-light-skin-tone',
-  'person-running-medium-skin-tone',
+  'person-raising-hand-medium-dark-skin-tone',
+  'person-raising-hand-dark-skin-tone',
+  'person-bowing',
+  'person-bowing-light-skin-tone',
+  'person-bowing-medium-light-skin-tone',
+  'person-bowing-medium-skin-tone',
+  'person-bowing-medium-dark-skin-tone',
+  'person-bowing-dark-skin-tone',
+  'person-facepalming',
+  'person-facepalming-light-skin-tone',
+  'person-facepalming-medium-light-skin-tone',
+  'person-facepalming-medium-skin-tone',
+  'person-facepalming-medium-dark-skin-tone',
+  'person-facepalming-dark-skin-tone',
   'person-shrugging',
-  'person-shrugging-dark-skin-tone',
   'person-shrugging-light-skin-tone',
-  'person-shrugging-medium-dark-skin-tone',
   'person-shrugging-medium-light-skin-tone',
   'person-shrugging-medium-skin-tone',
+  'person-shrugging-medium-dark-skin-tone',
+  'person-shrugging-dark-skin-tone',
+  'police-officer',
+  'police-officer-light-skin-tone',
+  'police-officer-medium-light-skin-tone',
+  'police-officer-medium-skin-tone',
+  'police-officer-medium-dark-skin-tone',
+  'police-officer-dark-skin-tone',
+  'detective',
+  'detective-light-skin-tone',
+  'detective-medium-light-skin-tone',
+  'detective-medium-skin-tone',
+  'detective-medium-dark-skin-tone',
+  'detective-dark-skin-tone',
+  'guard',
+  'guard-light-skin-tone',
+  'guard-medium-light-skin-tone',
+  'guard-medium-skin-tone',
+  'guard-medium-dark-skin-tone',
+  'guard-dark-skin-tone',
+  'construction-worker',
+  'construction-worker-light-skin-tone',
+  'construction-worker-medium-light-skin-tone',
+  'construction-worker-medium-skin-tone',
+  'construction-worker-medium-dark-skin-tone',
+  'construction-worker-dark-skin-tone',
+  'prince',
+  'prince-light-skin-tone',
+  'prince-medium-light-skin-tone',
+  'prince-medium-skin-tone',
+  'prince-medium-dark-skin-tone',
+  'prince-dark-skin-tone',
+  'princess',
+  'princess-light-skin-tone',
+  'princess-medium-light-skin-tone',
+  'princess-medium-skin-tone',
+  'princess-medium-dark-skin-tone',
+  'princess-dark-skin-tone',
+  'person-wearing-turban',
+  'person-wearing-turban-light-skin-tone',
+  'person-wearing-turban-medium-light-skin-tone',
+  'person-wearing-turban-medium-skin-tone',
+  'person-wearing-turban-medium-dark-skin-tone',
+  'person-wearing-turban-dark-skin-tone',
+  'man-in-tuxedo',
+  'man-in-tuxedo-light-skin-tone',
+  'man-in-tuxedo-medium-light-skin-tone',
+  'man-in-tuxedo-medium-skin-tone',
+  'man-in-tuxedo-medium-dark-skin-tone',
+  'man-in-tuxedo-dark-skin-tone',
+  'pregnant-woman',
+  'pregnant-woman-light-skin-tone',
+  'pregnant-woman-medium-light-skin-tone',
+  'pregnant-woman-medium-skin-tone',
+  'pregnant-woman-medium-dark-skin-tone',
+  'pregnant-woman-dark-skin-tone',
+  'baby-angel',
+  'baby-angel-light-skin-tone',
+  'baby-angel-medium-light-skin-tone',
+  'baby-angel-medium-skin-tone',
+  'baby-angel-medium-dark-skin-tone',
+  'baby-angel-dark-skin-tone',
+  'santa-claus',
+  'santa-claus-light-skin-tone',
+  'santa-claus-medium-light-skin-tone',
+  'santa-claus-medium-skin-tone',
+  'santa-claus-medium-dark-skin-tone',
+  'santa-claus-dark-skin-tone',
+  'mrs-claus',
+  'mrs-claus-light-skin-tone',
+  'mrs-claus-medium-light-skin-tone',
+  'mrs-claus-medium-skin-tone',
+  'mrs-claus-medium-dark-skin-tone',
+  'mrs-claus-dark-skin-tone',
+  'person-getting-massage',
+  'person-getting-massage-light-skin-tone',
+  'person-getting-massage-medium-light-skin-tone',
+  'person-getting-massage-medium-skin-tone',
+  'person-getting-massage-medium-dark-skin-tone',
+  'person-getting-massage-dark-skin-tone',
+  'person-getting-haircut',
+  'person-getting-haircut-light-skin-tone',
+  'person-getting-haircut-medium-light-skin-tone',
+  'person-getting-haircut-medium-skin-tone',
+  'person-getting-haircut-medium-dark-skin-tone',
+  'person-getting-haircut-dark-skin-tone',
+  'person-walking',
+  'person-walking-light-skin-tone',
+  'person-walking-medium-light-skin-tone',
+  'person-walking-medium-skin-tone',
+  'person-walking-medium-dark-skin-tone',
+  'person-walking-dark-skin-tone',
+  'person-running',
+  'person-running-light-skin-tone',
+  'person-running-medium-light-skin-tone',
+  'person-running-medium-skin-tone',
+  'person-running-medium-dark-skin-tone',
+  'person-running-dark-skin-tone',
+  'woman-dancing',
+  'woman-dancing-light-skin-tone',
+  'woman-dancing-medium-light-skin-tone',
+  'woman-dancing-medium-skin-tone',
+  'woman-dancing-medium-dark-skin-tone',
+  'woman-dancing-dark-skin-tone',
+  'man-dancing',
+  'man-dancing-light-skin-tone',
+  'man-dancing-medium-light-skin-tone',
+  'man-dancing-medium-skin-tone',
+  'man-dancing-medium-dark-skin-tone',
+  'man-dancing-dark-skin-tone',
+  'people-with-bunny-ears',
+  'person-fencing',
+  'horse-racing',
+  'horse-racing-light-skin-tone',
+  'horse-racing-medium-light-skin-tone',
+  'horse-racing-medium-skin-tone',
+  'horse-racing-medium-dark-skin-tone',
+  'horse-racing-dark-skin-tone',
+  'skier',
+  'snowboarder',
+  'person-golfing',
   'person-surfing',
-  'person-surfing-dark-skin-tone',
   'person-surfing-light-skin-tone',
-  'person-surfing-medium-dark-skin-tone',
   'person-surfing-medium-light-skin-tone',
   'person-surfing-medium-skin-tone',
+  'person-surfing-medium-dark-skin-tone',
+  'person-surfing-dark-skin-tone',
+  'person-rowing-boat',
+  'person-rowing-boat-light-skin-tone',
+  'person-rowing-boat-medium-light-skin-tone',
+  'person-rowing-boat-medium-skin-tone',
+  'person-rowing-boat-medium-dark-skin-tone',
+  'person-rowing-boat-dark-skin-tone',
   'person-swimming',
-  'person-swimming-dark-skin-tone',
   'person-swimming-light-skin-tone',
-  'person-swimming-medium-dark-skin-tone',
   'person-swimming-medium-light-skin-tone',
   'person-swimming-medium-skin-tone',
+  'person-swimming-medium-dark-skin-tone',
+  'person-swimming-dark-skin-tone',
+  'person-bouncing-ball',
+  'person-bouncing-ball-light-skin-tone',
+  'person-bouncing-ball-medium-light-skin-tone',
+  'person-bouncing-ball-medium-skin-tone',
+  'person-bouncing-ball-medium-dark-skin-tone',
+  'person-bouncing-ball-dark-skin-tone',
+  'person-lifting-weights',
+  'person-lifting-weights-light-skin-tone',
+  'person-lifting-weights-medium-light-skin-tone',
+  'person-lifting-weights-medium-skin-tone',
+  'person-lifting-weights-medium-dark-skin-tone',
+  'person-lifting-weights-dark-skin-tone',
+  'person-biking',
+  'person-biking-light-skin-tone',
+  'person-biking-medium-light-skin-tone',
+  'person-biking-medium-skin-tone',
+  'person-biking-medium-dark-skin-tone',
+  'person-biking-dark-skin-tone',
+  'person-mountain-biking',
+  'person-mountain-biking-light-skin-tone',
+  'person-mountain-biking-medium-light-skin-tone',
+  'person-mountain-biking-medium-skin-tone',
+  'person-mountain-biking-medium-dark-skin-tone',
+  'person-mountain-biking-dark-skin-tone',
+  'person-cartwheeling',
+  'person-cartwheeling-light-skin-tone',
+  'person-cartwheeling-medium-light-skin-tone',
+  'person-cartwheeling-medium-skin-tone',
+  'person-cartwheeling-medium-dark-skin-tone',
+  'person-cartwheeling-dark-skin-tone',
+  'people-wrestling',
+  'person-playing-water-polo',
+  'person-playing-water-polo-light-skin-tone',
+  'person-playing-water-polo-medium-light-skin-tone',
+  'person-playing-water-polo-medium-skin-tone',
+  'person-playing-water-polo-medium-dark-skin-tone',
+  'person-playing-water-polo-dark-skin-tone',
+  'person-playing-handball',
+  'person-playing-handball-light-skin-tone',
+  'person-playing-handball-medium-light-skin-tone',
+  'person-playing-handball-medium-skin-tone',
+  'person-playing-handball-medium-dark-skin-tone',
+  'person-playing-handball-dark-skin-tone',
+  'person-juggling',
+  'person-juggling-light-skin-tone',
+  'person-juggling-medium-light-skin-tone',
+  'person-juggling-medium-skin-tone',
+  'person-juggling-medium-dark-skin-tone',
+  'person-juggling-dark-skin-tone',
   'person-taking-bath',
-  'person-taking-bath-dark-skin-tone',
   'person-taking-bath-light-skin-tone',
-  'person-taking-bath-medium-dark-skin-tone',
   'person-taking-bath-medium-light-skin-tone',
   'person-taking-bath-medium-skin-tone',
-  'person-tipping-hand',
-  'person-tipping-hand-dark-skin-tone',
-  'person-tipping-hand-light-skin-tone',
-  'person-tipping-hand-medium-dark-skin-tone',
-  'person-tipping-hand-medium-light-skin-tone',
-  'person-tipping-hand-medium-skin-tone',
-  'person-walking',
-  'person-walking-dark-skin-tone',
-  'person-walking-light-skin-tone',
-  'person-walking-medium-dark-skin-tone',
-  'person-walking-medium-light-skin-tone',
-  'person-walking-medium-skin-tone',
-  'person-wearing-turban',
-  'person-wearing-turban-dark-skin-tone',
-  'person-wearing-turban-light-skin-tone',
-  'person-wearing-turban-medium-dark-skin-tone',
-  'person-wearing-turban-medium-light-skin-tone',
-  'person-wearing-turban-medium-skin-tone',
-  'pick',
-  'pig',
+  'person-taking-bath-medium-dark-skin-tone',
+  'person-taking-bath-dark-skin-tone',
+  'person-in-bed',
+  'kiss',
+  'kiss-man-man',
+  'kiss-woman-woman',
+  'couple-with-heart',
+  'couple-with-heart-man-man',
+  'couple-with-heart-woman-woman',
+  'family',
+  'family-man-woman-girl',
+  'family-man-woman-girl-boy',
+  'family-man-woman-boy-boy',
+  'family-man-woman-girl-girl',
+  'family-man-man-boy',
+  'family-man-man-girl',
+  'family-man-man-girl-boy',
+  'family-man-man-boy-boy',
+  'family-man-man-girl-girl',
+  'family-woman-woman-boy',
+  'family-woman-woman-girl',
+  'family-woman-woman-girl-boy',
+  'family-woman-woman-boy-boy',
+  'family-woman-woman-girl-girl',
+  'speaking-head',
+  'bust-in-silhouette',
+  'busts-in-silhouette',
+  'footprints',
+  'light-skin-tone',
+  'medium-light-skin-tone',
+  'medium-skin-tone',
+  'medium-dark-skin-tone',
+  'dark-skin-tone',
+  'monkey-face',
+  'monkey',
+  'gorilla',
+  'dog-face',
+  'dog',
+  'poodle',
+  'wolf',
+  'fox',
+  'cat-face',
+  'cat',
+  'tiger-face',
+  'tiger',
+  'leopard',
+  'horse-face',
+  'horse',
+  'deer',
+  'cow-face',
+  'ox',
+  'water-buffalo',
+  'cow',
   'pig-face',
+  'pig',
+  'boar',
   'pig-nose',
-  'pile-of-poo',
-  'pill',
-  'pine-decoration',
-  'pineapple',
-  'ping-pong',
-  'pisces',
-  'pistol',
-  'pizza',
-  'place-of-worship',
-  'play-button',
-  'play-or-pause-button',
-  'police-car',
-  'police-car-light',
-  'police-officer',
-  'police-officer-dark-skin-tone',
-  'police-officer-light-skin-tone',
-  'police-officer-medium-dark-skin-tone',
-  'police-officer-medium-light-skin-tone',
-  'police-officer-medium-skin-tone',
-  'poodle',
-  'pool-8-ball',
-  'popcorn',
-  'post-office',
-  'postal-horn',
-  'postbox',
-  'pot-of-food',
-  'potable-water',
-  'potato',
-  'poultry-leg',
-  'pound-banknote',
-  'pound-symbol',
-  'pouting-cat-face',
-  'pouting-face',
-  'prayer-beads',
-  'pregnant-woman',
-  'pregnant-woman-dark-skin-tone',
-  'pregnant-woman-light-skin-tone',
-  'pregnant-woman-medium-dark-skin-tone',
-  'pregnant-woman-medium-light-skin-tone',
-  'pregnant-woman-medium-skin-tone',
-  'prince',
-  'prince-dark-skin-tone',
-  'prince-light-skin-tone',
-  'prince-medium-dark-skin-tone',
-  'prince-medium-light-skin-tone',
-  'prince-medium-skin-tone',
-  'princess',
-  'princess-dark-skin-tone',
-  'princess-light-skin-tone',
-  'princess-medium-dark-skin-tone',
-  'princess-medium-light-skin-tone',
-  'princess-medium-skin-tone',
-  'printer',
-  'prohibited',
-  'purple-heart',
-  'purse',
-  'pushpin',
-  'question-mark',
-  'rabbit',
-  'rabbit-face',
-  'racing-car',
-  'radio',
-  'radio-button',
-  'radioactive',
-  'railway-car',
-  'railway-track',
-  'rainbow',
-  'raised-back-of-hand',
-  'raised-back-of-hand-dark-skin-tone',
-  'raised-back-of-hand-light-skin-tone',
-  'raised-back-of-hand-medium-dark-skin-tone',
-  'raised-back-of-hand-medium-light-skin-tone',
-  'raised-back-of-hand-medium-skin-tone',
-  'raised-fist',
-  'raised-fist-dark-skin-tone',
-  'raised-fist-light-skin-tone',
-  'raised-fist-medium-dark-skin-tone',
-  'raised-fist-medium-light-skin-tone',
-  'raised-fist-medium-skin-tone',
-  'raised-hand',
-  'raised-hand-dark-skin-tone',
-  'raised-hand-light-skin-tone',
-  'raised-hand-medium-dark-skin-tone',
-  'raised-hand-medium-light-skin-tone',
-  'raised-hand-medium-skin-tone',
-  'raising-hands',
-  'raising-hands-dark-skin-tone',
-  'raising-hands-light-skin-tone',
-  'raising-hands-medium-dark-skin-tone',
-  'raising-hands-medium-light-skin-tone',
-  'raising-hands-medium-skin-tone',
   'ram',
+  'ewe',
+  'goat',
+  'camel',
+  'two-hump-camel',
+  'elephant',
+  'rhinoceros',
+  'mouse-face',
+  'mouse',
   'rat',
-  'record-button',
-  'recycling-symbol',
+  'rabbit-face',
+  'rabbit',
+  'chipmunk',
+  'bat',
+  'koala',
+  'paw-prints',
+  'turkey',
+  'chicken',
+  'rooster',
+  'hatching-chick',
+  'baby-chick',
+  'front-facing-baby-chick',
+  'bird',
+  'penguin',
+  'dove',
+  'eagle',
+  'duck',
+  'owl',
+  'crocodile',
+  'turtle',
+  'lizard',
+  'snake',
+  'dragon-face',
+  'dragon',
+  'spouting-whale',
+  'whale',
+  'dolphin',
+  'fish',
+  'tropical-fish',
+  'blowfish',
+  'shark',
+  'octopus',
+  'spiral-shell',
+  'snail',
+  'butterfly',
+  'bug',
+  'ant',
+  'honeybee',
+  'lady-beetle',
+  'spider',
+  'spider-web',
+  'scorpion',
+  'bouquet',
+  'cherry-blossom',
+  'white-flower',
+  'rosette',
+  'rose',
+  'wilted-flower',
+  'hibiscus',
+  'sunflower',
+  'blossom',
+  'tulip',
+  'seedling',
+  'evergreen-tree',
+  'deciduous-tree',
+  'palm-tree',
+  'cactus',
+  'sheaf-of-rice',
+  'herb',
+  'shamrock',
+  'four-leaf-clover',
+  'maple-leaf',
+  'fallen-leaf',
+  'leaf-fluttering-in-wind',
+  'grapes',
+  'melon',
+  'watermelon',
+  'tangerine',
+  'lemon',
+  'banana',
+  'pineapple',
   'red-apple',
-  'red-circle',
-  'red-heart',
-  'red-paper-lantern',
-  'red-triangle-pointed-down',
-  'red-triangle-pointed-up',
-  'registered',
-  'relieved-face',
-  'reminder-ribbon',
-  'repeat-button',
-  'repeat-single-button',
-  'rescue-workers-helmet',
-  'restroom',
-  'reverse-button',
-  'revolving-hearts',
-  'rhinoceros',
-  'ribbon',
-  'rice-ball',
+  'green-apple',
+  'pear',
+  'peach',
+  'cherries',
+  'strawberry',
+  'kiwi-fruit',
+  'tomato',
+  'avocado',
+  'eggplant',
+  'potato',
+  'carrot',
+  'ear-of-corn',
+  'hot-pepper',
+  'cucumber',
+  'mushroom',
+  'peanuts',
+  'chestnut',
+  'bread',
+  'croissant',
+  'baguette-bread',
+  'pancakes',
+  'cheese-wedge',
+  'meat-on-bone',
+  'poultry-leg',
+  'bacon',
+  'hamburger',
+  'french-fries',
+  'pizza',
+  'hot-dog',
+  'taco',
+  'burrito',
+  'stuffed-flatbread',
+  'egg',
+  'cooking',
+  'shallow-pan-of-food',
+  'pot-of-food',
+  'green-salad',
+  'popcorn',
+  'bento-box',
   'rice-cracker',
-  'right-anger-bubble',
-  'right-arrow',
-  'right-arrow-curving-down',
-  'right-arrow-curving-left',
-  'right-arrow-curving-up',
-  'right-facing-fist',
-  'right-facing-fist-dark-skin-tone',
-  'right-facing-fist-light-skin-tone',
-  'right-facing-fist-medium-dark-skin-tone',
-  'right-facing-fist-medium-light-skin-tone',
-  'right-facing-fist-medium-skin-tone',
-  'ring',
+  'rice-ball',
+  'cooked-rice',
+  'curry-rice',
+  'steaming-bowl',
+  'spaghetti',
   'roasted-sweet-potato',
-  'robot-face',
-  'rocket',
-  'rolled-up-newspaper',
-  'roller-coaster',
-  'rolling-on-the-floor-laughing',
-  'rooster',
-  'rose',
-  'rosette',
-  'round-pushpin',
-  'rugby-football',
-  'running-shirt',
-  'running-shoe',
-  'sad-but-relieved-face',
-  'sagittarius',
-  'sailboat',
+  'oden',
+  'sushi',
+  'fried-shrimp',
+  'fish-cake-with-swirl',
+  'dango',
+  'crab',
+  'shrimp',
+  'squid',
+  'soft-ice-cream',
+  'shaved-ice',
+  'ice-cream',
+  'doughnut',
+  'cookie',
+  'birthday-cake',
+  'shortcake',
+  'chocolate-bar',
+  'candy',
+  'lollipop',
+  'custard',
+  'honey-pot',
+  'baby-bottle',
+  'glass-of-milk',
+  'hot-beverage',
+  'teacup-without-handle',
   'sake',
-  'santa-claus',
-  'santa-claus-dark-skin-tone',
-  'santa-claus-light-skin-tone',
-  'santa-claus-medium-dark-skin-tone',
-  'santa-claus-medium-light-skin-tone',
-  'santa-claus-medium-skin-tone',
-  'satellite',
-  'satellite-antenna',
-  'saxophone',
+  'bottle-with-popping-cork',
+  'wine-glass',
+  'cocktail-glass',
+  'tropical-drink',
+  'beer-mug',
+  'clinking-beer-mugs',
+  'clinking-glasses',
+  'tumbler-glass',
+  'fork-and-knife-with-plate',
+  'fork-and-knife',
+  'spoon',
+  'kitchen-knife',
+  'amphora',
+  'globe-showing-europe-africa',
+  'globe-showing-americas',
+  'globe-showing-asia-australia',
+  'globe-with-meridians',
+  'world-map',
+  'map-of-japan',
+  'snow-capped-mountain',
+  'mountain',
+  'volcano',
+  'mount-fuji',
+  'camping',
+  'beach-with-umbrella',
+  'desert',
+  'desert-island',
+  'national-park',
+  'stadium',
+  'classical-building',
+  'building-construction',
+  'houses',
+  'derelict-house',
+  'house',
+  'house-with-garden',
+  'office-building',
+  'japanese-post-office',
+  'post-office',
+  'hospital',
+  'bank',
+  'hotel',
+  'love-hotel',
+  'convenience-store',
   'school',
-  'scissors',
-  'scorpio',
-  'scorpion',
-  'scroll',
+  'department-store',
+  'factory',
+  'japanese-castle',
+  'castle',
+  'wedding',
+  'tokyo-tower',
+  'statue-of-liberty',
+  'church',
+  'mosque',
+  'synagogue',
+  'shinto-shrine',
+  'kaaba',
+  'fountain',
+  'tent',
+  'foggy',
+  'night-with-stars',
+  'cityscape',
+  'sunrise-over-mountains',
+  'sunrise',
+  'cityscape-at-dusk',
+  'sunset',
+  'bridge-at-night',
+  'hot-springs',
+  'carousel-horse',
+  'ferris-wheel',
+  'roller-coaster',
+  'barber-pole',
+  'circus-tent',
+  'locomotive',
+  'railway-car',
+  'high-speed-train',
+  'bullet-train',
+  'train',
+  'metro',
+  'light-rail',
+  'station',
+  'tram',
+  'monorail',
+  'mountain-railway',
+  'tram-car',
+  'bus',
+  'oncoming-bus',
+  'trolleybus',
+  'minibus',
+  'ambulance',
+  'fire-engine',
+  'police-car',
+  'oncoming-police-car',
+  'taxi',
+  'oncoming-taxi',
+  'automobile',
+  'oncoming-automobile',
+  'sport-utility-vehicle',
+  'delivery-truck',
+  'articulated-lorry',
+  'tractor',
+  'racing-car',
+  'motorcycle',
+  'motor-scooter',
+  'bicycle',
+  'kick-scooter',
+  'bus-stop',
+  'motorway',
+  'railway-track',
+  'oil-drum',
+  'fuel-pump',
+  'police-car-light',
+  'horizontal-traffic-light',
+  'vertical-traffic-light',
+  'stop-sign',
+  'construction',
+  'anchor',
+  'sailboat',
+  'canoe',
+  'speedboat',
+  'passenger-ship',
+  'ferry',
+  'motor-boat',
+  'ship',
+  'airplane',
+  'small-airplane',
+  'airplane-departure',
+  'airplane-arrival',
   'seat',
-  'see-no-evil-monkey',
-  'seedling',
-  'selfie',
-  'selfie-dark-skin-tone',
-  'selfie-light-skin-tone',
-  'selfie-medium-dark-skin-tone',
-  'selfie-medium-light-skin-tone',
-  'selfie-medium-skin-tone',
+  'helicopter',
+  'suspension-railway',
+  'mountain-cableway',
+  'aerial-tramway',
+  'satellite',
+  'rocket',
+  'bellhop-bell',
+  'hourglass-done',
+  'hourglass-not-done',
+  'watch',
+  'alarm-clock',
+  'stopwatch',
+  'timer-clock',
+  'mantelpiece-clock',
+  'twelve-oclock',
+  'twelve-thirty',
+  'one-oclock',
+  'one-thirty',
+  'two-thirty',
+  'three-oclock',
+  'three-thirty',
+  'four-oclock',
+  'four-thirty',
+  'five-oclock',
+  'five-thirty',
+  'six-oclock',
+  'six-thirty',
   'seven-oclock',
   'seven-thirty',
-  'shallow-pan-of-food',
-  'shamrock',
-  'shark',
-  'shaved-ice',
-  'sheaf-of-rice',
-  'shield',
-  'shinto-shrine',
-  'ship',
+  'eight-oclock',
+  'eight-thirty',
+  'nine-oclock',
+  'nine-thirty',
+  'ten-oclock',
+  'ten-thirty',
+  'eleven-oclock',
+  'eleven-thirty',
+  'new-moon',
+  'waxing-crescent-moon',
+  'first-quarter-moon',
+  'waxing-gibbous-moon',
+  'full-moon',
+  'waning-gibbous-moon',
+  'last-quarter-moon',
+  'waning-crescent-moon',
+  'crescent-moon',
+  'new-moon-face',
+  'first-quarter-moon-face',
+  'last-quarter-moon-face',
+  'thermometer',
+  'sun',
+  'full-moon-face',
+  'sun-with-face',
+  'star',
+  'glowing-star',
   'shooting-star',
-  'shopping-bags',
-  'shopping-cart',
-  'shortcake',
-  'shower',
-  'shrimp',
-  'shuffle-tracks-button',
-  'sign-of-the-horns',
-  'sign-of-the-horns-dark-skin-tone',
-  'sign-of-the-horns-light-skin-tone',
-  'sign-of-the-horns-medium-dark-skin-tone',
-  'sign-of-the-horns-medium-light-skin-tone',
-  'sign-of-the-horns-medium-skin-tone',
-  'six-oclock',
-  'six-thirty',
-  'skier',
-  'skis',
-  'skull',
-  'skull-and-crossbones',
-  'sleeping-face',
-  'sleepy-face',
-  'slightly-frowning-face',
-  'slightly-smiling-face',
-  'slot-machine',
-  'small-airplane',
-  'small-blue-diamond',
-  'small-orange-diamond',
-  'smiling-cat-face-with-heart-eyes',
-  'smiling-face',
-  'smiling-face-with-halo',
-  'smiling-face-with-heart-eyes',
-  'smiling-face-with-horns',
-  'smiling-face-with-smiling-eyes',
-  'smiling-face-with-sunglasses',
-  'smirking-face',
-  'snail',
-  'snake',
-  'sneezing-face',
-  'snow-capped-mountain',
-  'snowboarder',
+  'milky-way',
+  'cloud',
+  'sun-behind-cloud',
+  'cloud-with-lightning-and-rain',
+  'sun-behind-small-cloud',
+  'sun-behind-large-cloud',
+  'sun-behind-rain-cloud',
+  'cloud-with-rain',
+  'cloud-with-snow',
+  'cloud-with-lightning',
+  'tornado',
+  'fog',
+  'wind-face',
+  'cyclone',
+  'rainbow',
+  'closed-umbrella',
+  'umbrella',
+  'umbrella-with-rain-drops',
+  'umbrella-on-ground',
+  'high-voltage',
   'snowflake',
   'snowman',
   'snowman-without-snow',
-  'soccer-ball',
-  'soft-ice-cream',
-  'soon-arrow',
-  'sos-button',
-  'spade-suit',
-  'spaghetti',
-  'sparkle',
+  'comet',
+  'fire',
+  'droplet',
+  'water-wave',
+  'jack-o-lantern',
+  'christmas-tree',
+  'fireworks',
   'sparkler',
   'sparkles',
-  'sparkling-heart',
-  'speak-no-evil-monkey',
-  'speaker-high-volume',
-  'speaker-low-volume',
-  'speaker-medium-volume',
-  'speaking-head',
-  'speech-balloon',
-  'speedboat',
-  'spider',
-  'spider-web',
-  'spiral-calendar',
-  'spiral-notepad',
-  'spiral-shell',
-  'spoon',
-  'sport-utility-vehicle',
+  'balloon',
+  'party-popper',
+  'confetti-ball',
+  'tanabata-tree',
+  'pine-decoration',
+  'japanese-dolls',
+  'carp-streamer',
+  'wind-chime',
+  'moon-viewing-ceremony',
+  'ribbon',
+  'wrapped-gift',
+  'reminder-ribbon',
+  'admission-tickets',
+  'ticket',
+  'military-medal',
+  'trophy',
   'sports-medal',
-  'spouting-whale',
-  'squid',
-  'squinting-face-with-tongue',
-  'stadium',
-  'star',
-  'star-and-crescent',
-  'star-of-david',
-  'station',
-  'statue-of-liberty',
-  'steaming-bowl',
-  'stop-button',
-  'stop-sign',
-  'stopwatch',
-  'straight-ruler',
-  'strawberry',
+  '1st-place-medal',
+  '2nd-place-medal',
+  '3rd-place-medal',
+  'soccer-ball',
+  'baseball',
+  'basketball',
+  'volleyball',
+  'american-football',
+  'rugby-football',
+  'tennis',
+  'bowling',
+  'cricket-game',
+  'field-hockey',
+  'ice-hockey',
+  'ping-pong',
+  'badminton',
+  'boxing-glove',
+  'martial-arts-uniform',
+  'goal-net',
+  'flag-in-hole',
+  'ice-skate',
+  'fishing-pole',
+  'running-shirt',
+  'skis',
+  'direct-hit',
+  'pool-8-ball',
+  'crystal-ball',
+  'video-game',
+  'joystick',
+  'slot-machine',
+  'game-die',
+  'spade-suit',
+  'heart-suit',
+  'diamond-suit',
+  'club-suit',
+  'joker',
+  'mahjong-red-dragon',
+  'flower-playing-cards',
+  'performing-arts',
+  'framed-picture',
+  'artist-palette',
+  'glasses',
+  'sunglasses',
+  'necktie',
+  't-shirt',
+  'jeans',
+  'dress',
+  'kimono',
+  'bikini',
+  'womans-clothes',
+  'purse',
+  'handbag',
+  'clutch-bag',
+  'shopping-bags',
+  'backpack',
+  'mans-shoe',
+  'running-shoe',
+  'high-heeled-shoe',
+  'womans-sandal',
+  'womans-boot',
+  'crown',
+  'womans-hat',
+  'top-hat',
+  'graduation-cap',
+  'rescue-workers-helmet',
+  'prayer-beads',
+  'lipstick',
+  'ring',
+  'gem-stone',
+  'muted-speaker',
+  'speaker-low-volume',
+  'speaker-medium-volume',
+  'speaker-high-volume',
+  'loudspeaker',
+  'megaphone',
+  'postal-horn',
+  'bell',
+  'bell-with-slash',
+  'musical-score',
+  'musical-note',
+  'musical-notes',
   'studio-microphone',
-  'stuffed-flatbread',
-  'sun',
-  'sun-behind-cloud',
-  'sun-behind-large-cloud',
-  'sun-behind-rain-cloud',
-  'sun-behind-small-cloud',
-  'sun-with-face',
-  'sunflower',
-  'sunglasses',
-  'sunrise',
-  'sunrise-over-mountains',
-  'sunset',
-  'sushi',
-  'suspension-railway',
-  'sweat-droplets',
-  'synagogue',
-  'syringe',
-  't-shirt',
-  'taco',
-  'tanabata-tree',
-  'tangerine',
-  'taurus',
-  'taxi',
-  'teacup-without-handle',
-  'tear-off-calendar',
+  'level-slider',
+  'control-knobs',
+  'microphone',
+  'headphone',
+  'radio',
+  'saxophone',
+  'guitar',
+  'musical-keyboard',
+  'trumpet',
+  'violin',
+  'drum',
+  'mobile-phone',
+  'mobile-phone-with-arrow',
   'telephone',
   'telephone-receiver',
-  'telescope',
-  'television',
-  'ten-oclock',
-  'ten-thirty',
-  'tennis',
-  'tent',
-  'thermometer',
-  'thinking-face',
-  'thought-balloon',
-  'three-oclock',
-  'three-thirty',
-  'thumbs-down',
-  'thumbs-down-dark-skin-tone',
-  'thumbs-down-light-skin-tone',
-  'thumbs-down-medium-dark-skin-tone',
-  'thumbs-down-medium-light-skin-tone',
-  'thumbs-down-medium-skin-tone',
-  'thumbs-up',
-  'thumbs-up-dark-skin-tone',
-  'thumbs-up-light-skin-tone',
-  'thumbs-up-medium-dark-skin-tone',
-  'thumbs-up-medium-light-skin-tone',
-  'thumbs-up-medium-skin-tone',
-  'ticket',
-  'tiger',
-  'tiger-face',
-  'timer-clock',
-  'tired-face',
-  'toilet',
-  'tokyo-tower',
-  'tomato',
-  'tongue',
-  'top-arrow',
-  'top-hat',
-  'tornado',
+  'pager',
+  'fax-machine',
+  'battery',
+  'electric-plug',
+  'desktop-computer',
+  'printer',
+  'keyboard',
+  'computer-mouse',
   'trackball',
-  'tractor',
-  'trade-mark',
-  'train',
-  'tram',
-  'tram-car',
+  'computer-disk',
+  'floppy-disk',
+  'optical-disk',
+  'dvd',
+  'movie-camera',
+  'film-frames',
+  'film-projector',
+  'clapper-board',
+  'television',
+  'camera',
+  'camera-with-flash',
+  'video-camera',
+  'videocassette',
+  'magnifying-glass-tilted-left',
+  'magnifying-glass-tilted-right',
+  'candle',
+  'light-bulb',
+  'flashlight',
+  'red-paper-lantern',
+  'notebook-with-decorative-cover',
+  'closed-book',
+  'open-book',
+  'green-book',
+  'blue-book',
+  'orange-book',
+  'books',
+  'notebook',
+  'ledger',
+  'page-with-curl',
+  'scroll',
+  'page-facing-up',
+  'newspaper',
+  'rolled-up-newspaper',
+  'bookmark-tabs',
+  'bookmark',
+  'label',
+  'money-bag',
+  'yen-banknote',
+  'dollar-banknote',
+  'euro-banknote',
+  'pound-banknote',
+  'money-with-wings',
+  'credit-card',
+  'chart-increasing-with-yen',
+  'envelope',
+  'e-mail',
+  'incoming-envelope',
+  'envelope-with-arrow',
+  'outbox-tray',
+  'inbox-tray',
+  'package',
+  'closed-mailbox-with-raised-flag',
+  'closed-mailbox-with-lowered-flag',
+  'open-mailbox-with-raised-flag',
+  'open-mailbox-with-lowered-flag',
+  'postbox',
+  'ballot-box-with-ballot',
+  'pencil',
+  'black-nib',
+  'fountain-pen',
+  'pen',
+  'paintbrush',
+  'crayon',
+  'memo',
+  'briefcase',
+  'file-folder',
+  'open-file-folder',
+  'card-index-dividers',
+  'calendar',
+  'tear-off-calendar',
+  'spiral-notepad',
+  'spiral-calendar',
+  'card-index',
+  'chart-increasing',
+  'chart-decreasing',
+  'bar-chart',
+  'clipboard',
+  'pushpin',
+  'round-pushpin',
+  'paperclip',
+  'linked-paperclips',
+  'straight-ruler',
   'triangular-ruler',
-  'trident-emblem',
-  'trolleybus',
-  'trophy',
-  'tropical-drink',
-  'tropical-fish',
-  'trumpet',
-  'tulip',
-  'tumbler-glass',
-  'turkey',
-  'turtle',
-  'twelve-oclock',
-  'twelve-thirty',
-  'two-hearts',
-  'two-hump-camel',
-  'two-men-holding-hands',
-  'two-oclock',
-  'two-thirty',
-  'two-women-holding-hands',
-  'umbrella',
-  'umbrella-on-ground',
-  'umbrella-with-rain-drops',
-  'unamused-face',
-  'unicorn-face',
+  'scissors',
+  'card-file-box',
+  'file-cabinet',
+  'wastebasket',
+  'locked',
   'unlocked',
+  'locked-with-pen',
+  'locked-with-key',
+  'key',
+  'old-key',
+  'hammer',
+  'pick',
+  'hammer-and-pick',
+  'hammer-and-wrench',
+  'dagger',
+  'crossed-swords',
+  'pistol',
+  'bow-and-arrow',
+  'shield',
+  'wrench',
+  'nut-and-bolt',
+  'gear',
+  'clamp',
+  'balance-scale',
+  'link',
+  'chains',
+  'alembic',
+  'microscope',
+  'telescope',
+  'satellite-antenna',
+  'syringe',
+  'pill',
+  'door',
+  'bed',
+  'couch-and-lamp',
+  'toilet',
+  'shower',
+  'bathtub',
+  'shopping-cart',
+  'cigarette',
+  'coffin',
+  'funeral-urn',
+  'moai',
+  'atm-sign',
+  'litter-in-bin-sign',
+  'potable-water',
+  'wheelchair-symbol',
+  'mens-room',
+  'womens-room',
+  'restroom',
+  'baby-symbol',
+  'water-closet',
+  'passport-control',
+  'customs',
+  'baggage-claim',
+  'left-luggage',
+  'warning',
+  'children-crossing',
+  'no-entry',
+  'prohibited',
+  'no-bicycles',
+  'no-smoking',
+  'no-littering',
+  'non-potable-water',
+  'no-pedestrians',
+  'no-mobile-phones',
+  'no-one-under-eighteen',
+  'radioactive',
+  'biohazard',
   'up-arrow',
-  'up-down-arrow',
-  'up-left-arrow',
   'up-right-arrow',
-  'up-text-button',
-  'upside-down-face',
+  'right-arrow',
+  'down-right-arrow',
+  'down-arrow',
+  'down-left-arrow',
+  'left-arrow',
+  'up-left-arrow',
+  'up-down-arrow',
+  'left-right-arrow',
+  'right-arrow-curving-left',
+  'left-arrow-curving-right',
+  'right-arrow-curving-up',
+  'right-arrow-curving-down',
+  'clockwise-vertical-arrows',
+  'counterclockwise-arrows-button',
+  'back-arrow',
+  'end-arrow',
+  'on-arrow',
+  'soon-arrow',
+  'top-arrow',
+  'place-of-worship',
+  'atom-symbol',
+  'om',
+  'star-of-david',
+  'wheel-of-dharma',
+  'yin-yang',
+  'latin-cross',
+  'orthodox-cross',
+  'star-and-crescent',
+  'peace-symbol',
+  'menorah',
+  'dotted-six-pointed-star',
+  'aries',
+  'taurus',
+  'gemini',
+  'cancer',
+  'leo',
+  'virgo',
+  'libra',
+  'scorpio',
+  'sagittarius',
+  'capricorn',
+  'aquarius',
+  'pisces',
+  'ophiuchus',
+  'shuffle-tracks-button',
+  'repeat-button',
+  'repeat-single-button',
+  'play-button',
+  'fast-forward-button',
+  'next-track-button',
+  'play-or-pause-button',
+  'reverse-button',
+  'fast-reverse-button',
+  'last-track-button',
   'upwards-button',
-  'vertical-traffic-light',
+  'fast-up-button',
+  'downwards-button',
+  'fast-down-button',
+  'pause-button',
+  'stop-button',
+  'record-button',
+  'eject-button',
+  'cinema',
+  'dim-button',
+  'bright-button',
+  'antenna-bars',
   'vibration-mode',
-  'victory-hand',
-  'victory-hand-dark-skin-tone',
-  'victory-hand-light-skin-tone',
-  'victory-hand-medium-dark-skin-tone',
-  'victory-hand-medium-light-skin-tone',
-  'victory-hand-medium-skin-tone',
-  'video-camera',
-  'video-game',
-  'videocassette',
-  'violin',
-  'virgo',
-  'volcano',
-  'volleyball',
-  'vs-button',
-  'vulcan-salute',
-  'vulcan-salute-dark-skin-tone',
-  'vulcan-salute-light-skin-tone',
-  'vulcan-salute-medium-dark-skin-tone',
-  'vulcan-salute-medium-light-skin-tone',
-  'vulcan-salute-medium-skin-tone',
-  'waning-crescent-moon',
-  'waning-gibbous-moon',
-  'warning',
-  'wastebasket',
-  'watch',
-  'water-buffalo',
-  'water-closet',
-  'water-wave',
-  'watermelon',
-  'waving-hand',
-  'waving-hand-dark-skin-tone',
-  'waving-hand-light-skin-tone',
-  'waving-hand-medium-dark-skin-tone',
-  'waving-hand-medium-light-skin-tone',
-  'waving-hand-medium-skin-tone',
+  'mobile-phone-off',
+  'double-exclamation-mark',
+  'exclamation-question-mark',
+  'question-mark',
+  'white-question-mark',
+  'white-exclamation-mark',
+  'exclamation-mark',
   'wavy-dash',
-  'waxing-crescent-moon',
-  'waxing-gibbous-moon',
-  'weary-cat-face',
-  'weary-face',
-  'wedding',
-  'whale',
-  'wheel-of-dharma',
-  'wheelchair-symbol',
+  'currency-exchange',
+  'heavy-dollar-sign',
+  'recycling-symbol',
+  'fleur-de-lis',
+  'trident-emblem',
+  'name-badge',
+  'japanese-symbol-for-beginner',
+  'cross-mark',
+  'cross-mark-button',
+  'curly-loop',
+  'double-curly-loop',
+  'part-alternation-mark',
+  'eight-spoked-asterisk',
+  'eight-pointed-star',
+  'sparkle',
+  'copyright',
+  'registered',
+  'trade-mark',
+  'keycap-asterisk',
+  'keycap-10',
+  'input-latin-uppercase',
+  'input-latin-lowercase',
+  'input-numbers',
+  'input-symbols',
+  'input-latin-letters',
+  'cl-button',
+  'cool-button',
+  'free-button',
+  'information',
+  'id-button',
+  'circled-m',
+  'new-button',
+  'ng-button',
+  'ok-button',
+  'p-button',
+  'sos-button',
+  'vs-button',
+  'japanese-here-button',
+  'japanese-service-charge-button',
+  'japanese-monthly-amount-button',
+  'japanese-not-free-of-charge-button',
+  'japanese-reserved-button',
+  'japanese-bargain-button',
+  'japanese-discount-button',
+  'japanese-free-of-charge-button',
+  'japanese-prohibited-button',
+  'japanese-acceptable-button',
+  'japanese-application-button',
+  'japanese-passing-grade-button',
+  'japanese-vacancy-button',
+  'japanese-congratulations-button',
+  'japanese-secret-button',
+  'japanese-open-for-business-button',
+  'japanese-no-vacancy-button',
+  'black-circle',
   'white-circle',
-  'white-exclamation-mark',
-  'white-flower',
-  'white-heavy-check-mark',
+  'black-large-square',
   'white-large-square',
-  'white-medium-small-square',
+  'black-medium-square',
   'white-medium-square',
-  'white-question-mark',
+  'black-medium-small-square',
+  'white-medium-small-square',
+  'black-small-square',
   'white-small-square',
+  'large-orange-diamond',
+  'large-blue-diamond',
+  'small-orange-diamond',
+  'small-blue-diamond',
+  'red-triangle-pointed-up',
+  'red-triangle-pointed-down',
+  'diamond-with-a-dot',
+  'radio-button',
   'white-square-button',
-  'wilted-flower',
-  'wind-chime',
-  'wind-face',
-  'wine-glass',
-  'winking-face',
-  'winking-face-with-tongue',
-  'wolf',
-  'woman',
-  'woman-dancing',
-  'woman-dancing-dark-skin-tone',
-  'woman-dancing-light-skin-tone',
-  'woman-dancing-medium-dark-skin-tone',
-  'woman-dancing-medium-light-skin-tone',
-  'woman-dancing-medium-skin-tone',
-  'woman-dark-skin-tone',
-  'woman-light-skin-tone',
-  'woman-medium-dark-skin-tone',
-  'woman-medium-light-skin-tone',
-  'woman-medium-skin-tone',
-  'womans-boot',
-  'womans-clothes',
-  'womans-hat',
-  'womans-sandal',
-  'womens-room',
-  'world-map',
-  'worried-face',
-  'wrapped-gift',
-  'wrench',
-  'writing-hand',
-  'writing-hand-dark-skin-tone',
-  'writing-hand-light-skin-tone',
-  'writing-hand-medium-dark-skin-tone',
-  'writing-hand-medium-light-skin-tone',
-  'writing-hand-medium-skin-tone',
-  'yellow-heart',
-  'yen-banknote',
-  'yin-yang',
-  'zipper-mouth-face',
-  'zzz',
+  'black-square-button',
+  'flag-england',
+  'flag-scotland',
+  'digit-zero',
+  'asterisk',
+  'digit-nine',
+  'digit-one',
+  'digit-two',
+  'digit-three',
+  'digit-four',
+  'digit-five',
+  'digit-six',
+  'digit-seven',
+  'digit-eight',
 ]

From aed58b8bfd7b532a9497cb9c1471b9b0ed2c2a94 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 22 Dec 2022 02:28:45 +0530
Subject: [PATCH 25/41] feat(gui): add icon change option for view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/general/ViewIcon.vue    | 26 +++++++++++++++
 .../components/smartsheet/sidebar/MenuTop.vue | 20 ++++++++++-
 .../smartsheet/sidebar/RenameableMenuItem.vue | 29 ++++++++--------
 .../smartsheet/toolbar/ViewActions.vue        |  7 +---
 packages/nocodb-sdk/src/lib/Api.ts            |  2 ++
 packages/nocodb/src/lib/models/Model.ts       | 17 ++--------
 packages/nocodb/src/lib/models/View.ts        | 12 ++++++-
 packages/nocodb/src/lib/utils/modelUtils.ts   | 33 +++++++++++++++++++
 scripts/sdk/swagger.json                      |  4 +++
 9 files changed, 112 insertions(+), 38 deletions(-)
 create mode 100644 packages/nc-gui/components/general/ViewIcon.vue
 create mode 100644 packages/nocodb/src/lib/utils/modelUtils.ts

diff --git a/packages/nc-gui/components/general/ViewIcon.vue b/packages/nc-gui/components/general/ViewIcon.vue
new file mode 100644
index 0000000000..5d347ea34b
--- /dev/null
+++ b/packages/nc-gui/components/general/ViewIcon.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Icon as IcIcon } from '@iconify/vue'
+import type { TableType } from 'nocodb-sdk'
+import { viewIcons } from '#imports'
+
+const { meta: viewMeta } = defineProps<{
+  meta: TableType
+}>()
+</script>
+
+<template>
+  <IcIcon
+    v-if="viewMeta?.meta?.icon"
+    :data-testid="`nc-icon-${viewMeta?.meta?.icon}`"
+    class="text-[16px]"
+    :icon="viewMeta?.meta?.icon"
+  ></IcIcon>
+  <component
+    :is="viewIcons[viewMeta.type]?.icon"
+    v-else
+    class="nc-view-icon group-hover"
+    :style="{ color: viewIcons[viewMeta.type]?.color }"
+  />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index d8b23daa84..a08eed3735 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -140,7 +140,7 @@ const initSortable = (el: HTMLElement) => {
   if (sortable) sortable.destroy()
 
   sortable = new Sortable(el, {
-    handle: '.nc-drag-icon',
+    // handle: '.nc-drag-icon',
     ghostClass: 'ghost',
     onStart: onSortStart,
     onEnd: onSortEnd,
@@ -213,6 +213,23 @@ function openDeleteDialog(view: ViewType) {
     close(1000)
   }
 }
+
+const setIcon = async (icon: string, view: ViewType) => {
+  try {
+    view.meta = {
+      ...(view.meta || {}),
+      icon,
+    }
+
+    api.dbView.update(view.id as string, {
+      meta: view.meta,
+    })
+
+    $e('a:view:icon:sidebar', { icon })
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
 </script>
 
 <template>
@@ -234,6 +251,7 @@ function openDeleteDialog(view: ViewType) {
       @open-modal="$emit('openModal', $event)"
       @delete="openDeleteDialog"
       @rename="onRename"
+      @select-icon="setIcon($event, view)"
     />
   </a-menu>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index bdf6c607d8..3d5646d57c 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -3,7 +3,6 @@ import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
 import {
   IsLockedInj,
-  computed,
   inject,
   message,
   onKeyStroke,
@@ -11,7 +10,6 @@ import {
   useNuxtApp,
   useUIPermission,
   useVModel,
-  viewIcons,
 } from '#imports'
 
 interface Props {
@@ -21,9 +19,15 @@ interface Props {
 
 interface Emits {
   (event: 'update:view', data: Record<string, any>): void
+
+  (event: 'selectIcon', icon: string): void
+
   (event: 'changeView', view: Record<string, any>): void
+
   (event: 'rename', view: ViewType): void
+
   (event: 'delete', view: ViewType): void
+
   (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
 }
 
@@ -48,8 +52,6 @@ let isStopped = $ref(false)
 /** Original view title when editing the view name */
 let originalTitle = $ref<string | undefined>()
 
-const viewType = computed(() => vModel.value.type as number)
-
 /** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */
 const onClick = useDebounceFn(() => {
   if (isEditing || isStopped) return
@@ -172,17 +174,14 @@ function onStopEdit() {
     @click.stop="onClick"
   >
     <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2" data-testid="view-item">
-      <div class="flex w-auto" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
-        <MdiDrag
-          class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 !cursor-move"
-          @click.stop.prevent
-        />
-
-        <component
-          :is="viewIcons[viewType].icon"
-          class="nc-view-icon group-hover:hidden"
-          :style="{ color: viewIcons[viewType].color }"
-        />
+      <div class="flex w-auto min-w-5" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
+        <a-dropdown :trigger="['click']" @click.stop>
+          <GeneralViewIcon :meta="props.view"></GeneralViewIcon>
+
+          <template v-if="isUIAllowed('viewIconCustomisation')" #overlay>
+            <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="emits('selectIcon', $event)" />
+          </template>
+        </a-dropdown>
       </div>
 
       <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index d182980b12..83cf7acb2d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -4,7 +4,6 @@ import {
   IsLockedInj,
   IsPublicInj,
   extractSdkResponseErrorMsg,
-  getViewIcon,
   inject,
   message,
   ref,
@@ -93,11 +92,7 @@ useMenuCloseOnEsc(open)
     <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
       <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
-          <component
-            :is="getViewIcon(selectedView?.type)?.icon"
-            class="nc-view-icon group-hover:hidden"
-            :style="{ color: getViewIcon(selectedView?.type)?.color }"
-          />
+          <GeneralViewIcon :meta="selectedView"></GeneralViewIcon>
 
           <span class="!text-sm font-weight-normal">
             <GeneralTruncateText>{{ selectedView?.title }}</GeneralTruncateText>
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index 025a6beac1..52c27fda2f 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -135,6 +135,7 @@ export interface ViewType {
   fk_model_id?: string;
   slug?: string;
   uuid?: string;
+  meta?: any;
   show_system_fields?: boolean;
   lock_type?: 'collaborative' | 'locked' | 'personal';
   type?: number;
@@ -2316,6 +2317,7 @@ export class Api<
       viewId: string,
       data: {
         order?: number;
+        meta?: any;
         title?: string;
         show_system_fields?: boolean;
         lock_type?: 'collaborative' | 'locked' | 'personal';
diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 799395ae85..17d3160cb2 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -1,4 +1,5 @@
 import Noco from '../Noco';
+import { parseMetaProp } from '../utils/modelUtils'
 import Column from './Column';
 import NocoCache from '../cache/NocoCache';
 import { XKnex } from '../db/sql-data-mapper';
@@ -22,21 +23,7 @@ import { NcError } from '../meta/helpers/catchError';
 import Audit from './Audit';
 import { sanitize } from '../db/sql-data-mapper/lib/sql/helpers/sanitize';
 
-function parseMetaProp(modelOrModelList: Model[] | Model) {
-  if (!modelOrModelList) return;
-
-  // parse meta property
-  for (const model of Array.isArray(modelOrModelList)
-    ? modelOrModelList
-    : [modelOrModelList]) {
-    try {
-      model.meta =
-        typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta;
-    } catch {
-      model.meta = {};
-    }
-  }
-}
+
 
 export default class Model implements TableType {
   copy_enabled: boolean;
diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index d608010fe9..06c092cc04 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/packages/nocodb/src/lib/models/View.ts
@@ -5,6 +5,7 @@ import {
   CacheScope,
   MetaTable,
 } from '../utils/globals';
+import { parseMetaProp, stringifyMetaProp } from '../utils/modelUtils'
 import Model from './Model';
 import FormView from './FormView';
 import GridView from './GridView';
@@ -118,6 +119,7 @@ export default class View implements ViewType {
       ));
     if (!view) {
       view = await ncMeta.metaGet2(null, null, MetaTable.VIEWS, viewId);
+      parseMetaProp(view);
       await NocoCache.set(`${CacheScope.VIEW}:${view.id}`, view);
     }
 
@@ -156,6 +158,7 @@ export default class View implements ViewType {
           ],
         }
       );
+      parseMetaProp(view);
       // todo: cache - titleOrId can be viewId so we need a different scope here
       await NocoCache.set(
         `${CacheScope.VIEW}:${fk_model_id}:${titleOrId}`,
@@ -188,6 +191,7 @@ export default class View implements ViewType {
         },
         null
       );
+      parseMetaProp(view);
       await NocoCache.set(`${CacheScope.VIEW}:${fk_model_id}:default`, view);
     }
     return view && new View(view);
@@ -204,6 +208,7 @@ export default class View implements ViewType {
           order: 'asc',
         },
       });
+      parseMetaProp(viewsList);
       await NocoCache.setList(CacheScope.VIEW, [modelId], viewsList);
     }
     viewsList.sort(
@@ -254,8 +259,11 @@ export default class View implements ViewType {
       base_id: view.base_id,
       created_at: view.created_at,
       updated_at: view.updated_at,
+      meta: view.meta ?? {},
     };
 
+    stringifyMetaProp(insertObj);
+
     // get project and base id if missing
     if (!(view.project_id && view.base_id)) {
       const model = await Model.getByIdOrName({ id: view.fk_model_id }, ncMeta);
@@ -838,7 +846,9 @@ export default class View implements ViewType {
       'meta',
       'uuid',
     ]);
-    updateObj.meta = JSON.stringify(updateObj.meta);
+    // if meta data defined then stringify it
+    stringifyMetaProp(updateObj);
+
     // get existing cache
     const key = `${CacheScope.VIEW}:${viewId}`;
     let o = await NocoCache.get(key, CacheGetType.TYPE_OBJECT);
diff --git a/packages/nocodb/src/lib/utils/modelUtils.ts b/packages/nocodb/src/lib/utils/modelUtils.ts
new file mode 100644
index 0000000000..f2b6c7b96c
--- /dev/null
+++ b/packages/nocodb/src/lib/utils/modelUtils.ts
@@ -0,0 +1,33 @@
+export function parseMetaProp(modelOrModelList: { meta: any } | { meta: any }[]) {
+  if (!modelOrModelList) return
+
+  // parse meta property
+  for (const model of Array.isArray(modelOrModelList)
+    ? modelOrModelList
+    : [modelOrModelList]) {
+    try {
+      model.meta =
+        typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta
+    } catch {
+      model.meta = {}
+    }
+  }
+}
+
+export function stringifyMetaProp(
+  modelOrModelList: { meta?: any } | { meta?: any }[],
+) {
+  if (!modelOrModelList) return
+
+  // parse meta property
+  for (const model of Array.isArray(modelOrModelList)
+    ? modelOrModelList
+    : [modelOrModelList]) {
+    try {
+      model.meta =
+        typeof model.meta !== 'string' ? model.meta : JSON.parse(model.meta)
+    } catch (e) {
+      model.meta = '{}'
+    }
+  }
+}
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index b2a6ce14ed..fd0816a2ee 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -2194,6 +2194,8 @@
                   "order": {
                     "type": "number"
                   },
+                  "meta": {
+                  },
                   "title": {
                     "type": "string"
                   },
@@ -7586,6 +7588,8 @@
           "uuid": {
             "type": "string"
           },
+          "meta": {
+          },
           "show_system_fields": {
             "type": "boolean"
           },

From a757da68384731f71847d26872dcacada4e37ea4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 22 Dec 2022 17:39:36 +0530
Subject: [PATCH 26/41] fix(gui):shared view creation bug and show icon in
 shared view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/sidebar/MenuTop.vue  |  1 +
 .../smartsheet/sidebar/RenameableMenuItem.vue  | 16 ++++++++++++----
 packages/nc-gui/composables/useSharedView.ts   |  7 +++++--
 packages/nc-gui/layouts/shared-view.vue        |  3 ++-
 packages/nocodb/src/lib/models/View.ts         | 12 +++++++++---
 packages/nocodb/src/lib/utils/modelUtils.ts    | 18 ++++++++++--------
 6 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index a08eed3735..5fe7476271 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -216,6 +216,7 @@ function openDeleteDialog(view: ViewType) {
 
 const setIcon = async (icon: string, view: ViewType) => {
   try {
+    // modify the icon property in meta
     view.meta = {
       ...(view.meta || {}),
       icon,
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 3d5646d57c..3d4cafa757 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -12,6 +12,8 @@ import {
   useVModel,
 } from '#imports'
 
+import { Tooltip } from 'ant-design-vue'
+
 interface Props {
   view: ViewType
   onValidate: (view: ViewType) => boolean | string
@@ -173,10 +175,14 @@ function onStopEdit() {
     @dblclick.stop="onDblClick"
     @click.stop="onClick"
   >
-    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2" data-testid="view-item">
+    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2"
+         data-testid="view-item">
       <div class="flex w-auto min-w-5" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
         <a-dropdown :trigger="['click']" @click.stop>
-          <GeneralViewIcon :meta="props.view"></GeneralViewIcon>
+          <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
+            <GeneralViewIcon :meta="props.view"></GeneralViewIcon>
+            <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
+          </component>
 
           <template v-if="isUIAllowed('viewIconCustomisation')" #overlay>
             <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="emits('selectIcon', $event)" />
@@ -184,7 +190,8 @@ function onStopEdit() {
         </a-dropdown>
       </div>
 
-      <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" />
+      <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel"
+               @keydown="onKeyDown($event)" />
 
       <div v-else>
         <LazyGeneralTruncateText>{{ vModel.alias || vModel.title }}</LazyGeneralTruncateText>
@@ -199,7 +206,8 @@ function onStopEdit() {
               {{ $t('activity.copyView') }}
             </template>
 
-            <MdiContentCopy class="hidden group-hover:block text-gray-500 nc-view-copy-icon" @click.stop="onDuplicate" />
+            <MdiContentCopy class="hidden group-hover:block text-gray-500 nc-view-copy-icon"
+                            @click.stop="onDuplicate" />
           </a-tooltip>
 
           <template v-if="!vModel.is_default">
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index b0ddc867db..cb0c5ea8c5 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -58,8 +58,11 @@ export function useSharedView() {
         'xc-password': localPassword ?? password.value,
       },
     })
-
-    allowCSVDownload.value = JSON.parse(viewMeta.meta)?.allowCSVDownload
+    try {
+      allowCSVDownload.value = (typeof viewMeta.meta === 'string' ? JSON.parse(viewMeta.meta) : viewMeta.meta)?.allowCSVDownload
+    } catch {
+      allowCSVDownload.value = false
+    }
 
     if (localPassword) password.value = localPassword
     sharedView.value = { title: '', ...viewMeta }
diff --git a/packages/nc-gui/layouts/shared-view.vue b/packages/nc-gui/layouts/shared-view.vue
index 986213d401..797f68f5d4 100644
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@@ -58,7 +58,8 @@ export default {
                 <MdiReload :class="{ 'animate-infinite animate-spin ': isLoading }" />
               </template>
 
-              <div v-else class="text-xl font-semibold truncate text-white nc-shared-view-title">
+              <div v-else class="text-xl font-semibold truncate text-white nc-shared-view-title flex gap-2 items-center">
+                <GeneralViewIcon class="!text-2xl" :meta="sharedView" />
                 {{ sharedView?.title }}
               </div>
             </div>
diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index 06c092cc04..cc83d8bfea 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/packages/nocodb/src/lib/models/View.ts
@@ -5,7 +5,7 @@ import {
   CacheScope,
   MetaTable,
 } from '../utils/globals';
-import { parseMetaProp, stringifyMetaProp } from '../utils/modelUtils'
+import { parseMetaProp, stringifyMetaProp } from '../utils/modelUtils';
 import Model from './Model';
 import FormView from './FormView';
 import GridView from './GridView';
@@ -715,11 +715,16 @@ export default class View implements ViewType {
     }
   }
 
+  // todo: cache
   static async getByUUID(uuid: string, ncMeta = Noco.ncMeta) {
     const view = await ncMeta.metaGet2(null, null, MetaTable.VIEWS, {
       uuid,
     });
 
+    if (view) {
+      parseMetaProp(view);
+    }
+
     return view && new View(view);
   }
 
@@ -748,8 +753,9 @@ export default class View implements ViewType {
         viewId
       );
     }
-    if (!view.meta) {
+    if (!view.meta || !('allowCSVDownload' in view.meta)) {
       const defaultMeta = {
+        ...(view.meta ?? {}),
         allowCSVDownload: true,
       };
       // get existing cache
@@ -757,7 +763,7 @@ export default class View implements ViewType {
       const o = await NocoCache.get(key, CacheGetType.TYPE_OBJECT);
       if (o) {
         // update data
-        o.meta = JSON.stringify(defaultMeta);
+        o.meta = defaultMeta;
         // set cache
         await NocoCache.set(key, o);
       }
diff --git a/packages/nocodb/src/lib/utils/modelUtils.ts b/packages/nocodb/src/lib/utils/modelUtils.ts
index f2b6c7b96c..130e081f0a 100644
--- a/packages/nocodb/src/lib/utils/modelUtils.ts
+++ b/packages/nocodb/src/lib/utils/modelUtils.ts
@@ -1,5 +1,7 @@
-export function parseMetaProp(modelOrModelList: { meta: any } | { meta: any }[]) {
-  if (!modelOrModelList) return
+export function parseMetaProp(
+  modelOrModelList: { meta: any } | { meta: any }[]
+) {
+  if (!modelOrModelList) return;
 
   // parse meta property
   for (const model of Array.isArray(modelOrModelList)
@@ -7,17 +9,17 @@ export function parseMetaProp(modelOrModelList: { meta: any } | { meta: any }[])
     : [modelOrModelList]) {
     try {
       model.meta =
-        typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta
+        typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta;
     } catch {
-      model.meta = {}
+      model.meta = {};
     }
   }
 }
 
 export function stringifyMetaProp(
-  modelOrModelList: { meta?: any } | { meta?: any }[],
+  modelOrModelList: { meta?: any } | { meta?: any }[]
 ) {
-  if (!modelOrModelList) return
+  if (!modelOrModelList) return;
 
   // parse meta property
   for (const model of Array.isArray(modelOrModelList)
@@ -25,9 +27,9 @@ export function stringifyMetaProp(
     : [modelOrModelList]) {
     try {
       model.meta =
-        typeof model.meta !== 'string' ? model.meta : JSON.parse(model.meta)
+        typeof model.meta === 'string' ? model.meta : JSON.stringify(model.meta);
     } catch (e) {
-      model.meta = '{}'
+      model.meta = '{}';
     }
   }
 }

From 2c5786368fca399cbf16b0ec44c3f1c0042a215e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 22 Dec 2022 21:51:46 +0530
Subject: [PATCH 27/41] feat(gui): set table icon in ERD

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/erd/TableNode.vue  |  4 +---
 .../smartsheet/sidebar/RenameableMenuItem.vue | 21 ++++---------------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index ceac0b0742..06612bdfcc 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -59,9 +59,7 @@ watch(
         :class="[showSkeleton ? '' : 'bg-primary bg-opacity-10', hasColumns ? 'border-b-1' : '']"
         class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
       >
-        <MdiTableLarge v-if="table.type === 'table'" class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
-        <MdiEyeCircleOutline v-else class="text-primary" :class="showSkeleton ? 'text-6xl !px-2' : ''" />
-
+        <GeneralTableIcon class="text-primary" :meta="table" />
         <div :class="showSkeleton ? 'text-6xl' : ''" class="flex px-2">
           {{ table.title }}
         </div>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 3d4cafa757..6c8016368b 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -1,18 +1,8 @@
 <script lang="ts" setup>
 import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
-import {
-  IsLockedInj,
-  inject,
-  message,
-  onKeyStroke,
-  useDebounceFn,
-  useNuxtApp,
-  useUIPermission,
-  useVModel,
-} from '#imports'
-
 import { Tooltip } from 'ant-design-vue'
+import { IsLockedInj, inject, message, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
 
 interface Props {
   view: ViewType
@@ -175,8 +165,7 @@ function onStopEdit() {
     @dblclick.stop="onDblClick"
     @click.stop="onClick"
   >
-    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2"
-         data-testid="view-item">
+    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2" data-testid="view-item">
       <div class="flex w-auto min-w-5" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
         <a-dropdown :trigger="['click']" @click.stop>
           <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
@@ -190,8 +179,7 @@ function onStopEdit() {
         </a-dropdown>
       </div>
 
-      <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel"
-               @keydown="onKeyDown($event)" />
+      <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" />
 
       <div v-else>
         <LazyGeneralTruncateText>{{ vModel.alias || vModel.title }}</LazyGeneralTruncateText>
@@ -206,8 +194,7 @@ function onStopEdit() {
               {{ $t('activity.copyView') }}
             </template>
 
-            <MdiContentCopy class="hidden group-hover:block text-gray-500 nc-view-copy-icon"
-                            @click.stop="onDuplicate" />
+            <MdiContentCopy class="hidden group-hover:block text-gray-500 nc-view-copy-icon" @click.stop="onDuplicate" />
           </a-tooltip>
 
           <template v-if="!vModel.is_default">

From 2150eb8051500f4190ec7db949e4cc9af82fba11 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 22 Dec 2022 23:27:01 +0530
Subject: [PATCH 28/41] feat(gui): set LTAR link table icon

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/erd/TableNode.vue                  | 4 ++--
 .../components/virtual-cell/components/ListChildItems.vue     | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 06612bdfcc..bd9387824c 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@vue-flow/core'
-import { Handle, Position, useVueFlow } from '@vue-flow/core'
+import { Position, useVueFlow } from '@vue-flow/core'
 import type { LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { NodeData } from './utils'
@@ -60,7 +60,7 @@ watch(
         class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
       >
         <GeneralTableIcon class="text-primary" :meta="table" />
-        <div :class="showSkeleton ? 'text-6xl' : ''" class="flex px-2">
+        <div :class="showSkeleton ? 'text-6xl' : ''" class="flex pr-2 pl-1">
           {{ table.title }}
         </div>
       </div>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 8dabf9d4cb..33329b5410 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -129,7 +129,9 @@ const onClick = (row: Row) => {
         >
           <div class="flex items-center gap-1">
             <MdiLinkVariant class="text-xs" type="primary" />
-            Link to '{{ relatedTableMeta.title }}'
+            Link to '
+            <GeneralTableIcon :meta="relatedTableMeta" class="-mx-1 w-5" />
+            {{ relatedTableMeta.title }}'
           </div>
         </a-button>
       </div>

From 9d8bc1d81bb3e4264e7c120780b2340f23a7c45e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 11:16:57 +0530
Subject: [PATCH 29/41] fix(gui): keep parsed meta data in cache

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/models/View.ts                      | 6 ++++--
 .../pages/Dashboard/Grid/Column/LTAR/ChildList.ts           | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index cc83d8bfea..1963ded461 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/packages/nocodb/src/lib/models/View.ts
@@ -852,8 +852,6 @@ export default class View implements ViewType {
       'meta',
       'uuid',
     ]);
-    // if meta data defined then stringify it
-    stringifyMetaProp(updateObj);
 
     // get existing cache
     const key = `${CacheScope.VIEW}:${viewId}`;
@@ -870,6 +868,10 @@ export default class View implements ViewType {
       // set cache
       await NocoCache.set(key, o);
     }
+
+    // if meta data defined then stringify it
+    stringifyMetaProp(updateObj);
+
     // set meta
     await ncMeta.metaUpdate(null, null, MetaTable.VIEWS, updateObj, viewId);
     return this.get(viewId);
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
index d881b378f8..140e1eb3f5 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
@@ -20,7 +20,9 @@ export class ChildList extends BasePage {
     //    button: Link to 'City'
     //    icon: reload
     await expect(this.get().locator(`.ant-modal-title`)).toHaveText(`Child list`);
-    await expect(await this.get().locator(`button:has-text("Link to '${linkField}'")`).isVisible()).toBeTruthy();
+    await expect(
+      await this.get().locator(`button:has-text("Link to"):hasText("${linkField}'")`).isVisible()
+    ).toBeTruthy();
     await expect(await this.get().locator(`[data-testid="nc-child-list-reload"]`).isVisible()).toBeTruthy();
 
     // child list body validation (card count, card title)

From a6f76b4855ed2b651f2e446ccc6986711e4aba4b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 11:20:57 +0530
Subject: [PATCH 30/41] feat(gui): icon in shared view list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/toolbar/SharedViewList.vue  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
index 37b7146174..42be827a67 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
@@ -108,8 +108,9 @@ const deleteLink = async (id: string) => {
 
       <!-- View name -->
       <a-table-column key="title" :title="$t('labels.viewName')" data-index="title">
-        <template #default="{ text }">
-          <div class="text-xs" :title="text">
+        <template #default="{ text , record}">
+          <div class="text-xs flex items-center gap-1" :title="text">
+            <GeneralViewIcon class="w-5" :meta="record" />
             {{ text }}
           </div>
         </template>

From 793b79984209434b80069ecf62cd380ba3f0e33f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 11:25:13 +0530
Subject: [PATCH 31/41] chore(gui): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/erd/TableNode.vue                    | 2 +-
 .../nc-gui/components/smartsheet/toolbar/SharedViewList.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index bd9387824c..359da0f4c5 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { NodeProps } from '@vue-flow/core'
-import { Position, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, useVueFlow } from '@vue-flow/core'
 import type { LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { NodeData } from './utils'
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
index 42be827a67..e1886b2816 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
@@ -108,7 +108,7 @@ const deleteLink = async (id: string) => {
 
       <!-- View name -->
       <a-table-column key="title" :title="$t('labels.viewName')" data-index="title">
-        <template #default="{ text , record}">
+        <template #default="{ text, record }">
           <div class="text-xs flex items-center gap-1" :title="text">
             <GeneralViewIcon class="w-5" :meta="record" />
             {{ text }}

From 665a86dc0e6a134f43ceeb99924cdddd6bda82a5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 11:33:11 +0530
Subject: [PATCH 32/41] test(playwright): add test for view icon change

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/sidebar/RenameableMenuItem.vue |  2 +-
 .../pages/Dashboard/ViewSidebar/index.ts      | 21 +++++++++++++++++++
 tests/playwright/tests/viewKanban.spec.ts     |  7 ++++++-
 tests/playwright/tests/views.spec.ts          |  5 +++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 6c8016368b..bed7376e4e 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -169,7 +169,7 @@ function onStopEdit() {
       <div class="flex w-auto min-w-5" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
         <a-dropdown :trigger="['click']" @click.stop>
           <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-            <GeneralViewIcon :meta="props.view"></GeneralViewIcon>
+            <GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon>
             <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
           </component>
 
diff --git a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
index cf2791ce1b..6260f9d5b6 100644
--- a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
@@ -140,6 +140,27 @@ export class ViewSidebarPage extends BasePage {
     await this.verifyToast({ message: 'View created successfully' });
   }
 
+  async changeViewIcon({ title, icon }: { title: string; icon: string }) {
+    await this.get().locator(`[data-testid="view-sidebar-view-${title}"] .nc-view-icon`).click();
+
+    await this.rootPage.getByTestId('nc-emoji-filter').type(icon);
+    await this.rootPage.getByTestId('nc-emoji-container').locator(`.nc-emoji-item >> svg`).first().click();
+
+    await this.rootPage.getByTestId('nc-emoji-container').isHidden();
+    await expect(
+      this.get().locator(`[data-testid="view-sidebar-view-${title}"] [data-testid="nc-icon-emojione:${icon}"]`)
+    ).toHaveCount(1);
+  }
+
+  async verifyTabIcon({ title, icon }: { title: string; icon: string }) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await expect(
+      this.rootPage.locator(
+        `[data-testid="nc-tab-title"]:has-text("${title}") [data-testid="nc-tab-icon-emojione:${icon}"]`
+      )
+    ).toBeVisible();
+  }
+
   async validateRoleAccess(param: { role: string }) {
     const count = param.role === 'creator' ? 1 : 0;
     await expect(this.createGridButton).toHaveCount(count);
diff --git a/tests/playwright/tests/viewKanban.spec.ts b/tests/playwright/tests/viewKanban.spec.ts
index 1bbb31e7e8..0fe4ab45f7 100644
--- a/tests/playwright/tests/viewKanban.spec.ts
+++ b/tests/playwright/tests/viewKanban.spec.ts
@@ -19,7 +19,7 @@ test.describe('View', () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
     await dashboard.treeView.openTable({ title: 'Film' });
-    
+
     if (isSqlite(context)) {
       await dashboard.treeView.deleteTable({ title: 'FilmList' });
     }
@@ -237,6 +237,11 @@ test.describe('View', () => {
         order: order2[i - 1],
       });
 
+    await dashboard.viewSidebar.changeViewIcon({
+      title: 'Kanban-1',
+      icon: 'american-football',
+    });
+
     await dashboard.viewSidebar.deleteView({ title: 'Kanban-1' });
     ///////////////////////////////////////////////
 
diff --git a/tests/playwright/tests/views.spec.ts b/tests/playwright/tests/views.spec.ts
index c823384eed..df6707c5a5 100644
--- a/tests/playwright/tests/views.spec.ts
+++ b/tests/playwright/tests/views.spec.ts
@@ -44,6 +44,11 @@ test.describe('Views CRUD Operations', () => {
       title: 'CityGallery',
       newTitle: 'CityGallery2',
     });
+
+    await dashboard.viewSidebar.changeViewIcon({
+      title: 'CityGallery',
+      icon: 'american-football',
+    });
     await dashboard.viewSidebar.verifyView({
       title: 'CityGallery2',
       index: 3,

From b9951968198c8a220b42932a02db07b719bfedef Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 12:06:00 +0530
Subject: [PATCH 33/41] fix(gui): icons in ui acl and shared base

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/settings/UIAcl.vue  | 9 +++++----
 .../nc-gui/components/smartsheet/toolbar/ViewInfo.vue    | 9 ++-------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index b2d05e14ca..fe618595d5 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -10,7 +10,6 @@ import {
   useI18n,
   useNuxtApp,
   useProject,
-  viewIcons,
 } from '#imports'
 
 const props = defineProps<{
@@ -172,9 +171,11 @@ const columns = [
             </div>
 
             <div v-if="column.name === 'view_name'">
-              <div class="flex items-center">
-                <component :is="viewIcons[record.type].icon" :class="`text-${viewIcons[record.type].color} mr-1`" />
-                {{ record.title }}
+              <div class="flex items-center gap-1">
+                <div class="min-w-5 flex items-center justify-center">
+                  <GeneralViewIcon :meta="record" class="text-gray-500"></GeneralViewIcon>
+                </div>
+                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record.title }}</span>
               </div>
             </div>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index f59faf85c5..eb9d8a1d44 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -1,17 +1,12 @@
 <script setup lang="ts">
-import { ActiveViewInj, inject, viewIcons } from '#imports'
+import { ActiveViewInj, inject } from '#imports'
 
 const selectedView = inject(ActiveViewInj)
 </script>
 
 <template>
   <div class="flex gap-2 items-center ml-2 mr-2 pr-4 pb-1 py-0.5 border-r-1 border-gray-100">
-    <component
-      :is="viewIcons[selectedView?.type].icon"
-      v-if="selectedView?.type"
-      class="nc-view-icon group-hover:hidden"
-      :style="{ color: viewIcons[selectedView?.type].color }"
-    />
+    <GeneralViewIcon class="nc-view-icon" :meta="selectedView"></GeneralViewIcon>
 
     <span class="!text-sm font-medium max-w-36 overflow-ellipsis overflow-hidden whitespace-nowrap">
       {{ selectedView?.title }}

From ee2a1e6adbd7ad942226a8aae407aea143a0eff2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 12:20:17 +0530
Subject: [PATCH 34/41] fix(gui): show cusstom icon in meta diff

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../dashboard/settings/Metadata.vue           | 12 +++-
 .../nocodb/src/lib/meta/api/metaDiffApis.ts   | 57 ++++++++++++-------
 2 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 937559eff7..01355ef1c4 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -97,7 +97,6 @@ const columns = [
           </div>
         </a-button>
       </div>
-
       <div class="max-h-600px overflow-y-auto">
         <a-table
           class="w-full"
@@ -116,6 +115,17 @@ const columns = [
           <template #emptyText>
             <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
           </template>
+
+          <template #bodyCell="{ record, column }">
+            <div v-if="column.key === 'table_name'">
+              <div class="flex items-center gap-1">
+                <div class="min-w-5 flex items-center justify-center">
+                  <GeneralTableIcon :meta="record" class="text-gray-500"></GeneralTableIcon>
+                </div>
+                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record.table_name }}</span>
+              </div>
+            </div>
+          </template>
         </a-table>
       </div>
     </div>
diff --git a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
index 7f31c60534..e96317fb60 100644
--- a/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/meta/api/metaDiffApis.ts
@@ -44,6 +44,7 @@ type MetaDiff = {
   table_name: string;
   base_id: string;
   type: ModelTypes;
+  meta?: any;
   detectedChanges: Array<MetaDiffChange>;
 };
 
@@ -176,6 +177,7 @@ async function getMetaDiff(
 
     const tableProp: MetaDiff = {
       title: oldMeta.title,
+      meta: oldMeta.meta,
       table_name: table.tn,
       base_id: base.id,
       type: ModelTypes.TABLE,
@@ -248,6 +250,7 @@ async function getMetaDiff(
   for (const model of oldTableMetas) {
     changes.push({
       table_name: model.table_name,
+      meta: model.meta,
       base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [
@@ -452,6 +455,7 @@ async function getMetaDiff(
 
     const tableProp: MetaDiff = {
       title: oldMeta.title,
+      meta: oldMeta.meta,
       table_name: view.tn,
       base_id: base.id,
       type: ModelTypes.VIEW,
@@ -520,6 +524,7 @@ async function getMetaDiff(
   for (const model of oldViewMetas) {
     changes.push({
       table_name: model.table_name,
+      meta: model.meta,
       base_id: base.id,
       type: ModelTypes.TABLE,
       detectedChanges: [
@@ -539,7 +544,7 @@ async function getMetaDiff(
 
 export async function metaDiff(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
-  let changes = []
+  let changes = [];
   for (const base of project.bases) {
     try {
       // @ts-ignore
@@ -556,7 +561,7 @@ export async function metaDiff(req, res) {
 export async function baseMetaDiff(req, res) {
   const project = await Project.getWithInfo(req.params.projectId);
   const base = await Base.get(req.params.baseId);
-  let changes = []
+  let changes = [];
 
   const sqlClient = NcConnectionMgrv2.getSqlClient(base);
   changes = await getMetaDiff(sqlClient, project, base);
@@ -572,10 +577,10 @@ export async function metaDiffSync(req, res) {
     // @ts-ignore
     const sqlClient = NcConnectionMgrv2.getSqlClient(base);
     const changes = await getMetaDiff(sqlClient, project, base);
-  
+
     /* Get all relations */
     // const relations = (await sqlClient.relationListAll())?.data?.list;
-  
+
     for (const { table_name, detectedChanges } of changes) {
       // reorder changes to apply relation remove changes
       // before column remove to avoid foreign key constraint error
@@ -585,7 +590,7 @@ export async function metaDiffSync(req, res) {
           applyChangesPriorityOrder.indexOf(a.type)
         );
       });
-      
+
       for (const change of detectedChanges) {
         switch (change.type) {
           case MetaDiffType.TABLE_NEW:
@@ -593,15 +598,19 @@ export async function metaDiffSync(req, res) {
               const columns = (
                 await sqlClient.columnList({ tn: table_name })
               )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
-  
+
               mapDefaultPrimaryValue(columns);
-  
+
               const model = await Model.insert(project.id, base.id, {
                 table_name: table_name,
-                title: getTableNameAlias(table_name, base.is_meta ? project.prefix : '', base),
+                title: getTableNameAlias(
+                  table_name,
+                  base.is_meta ? project.prefix : '',
+                  base
+                ),
                 type: ModelTypes.TABLE,
               });
-  
+
               for (const column of columns) {
                 await Column.insert({
                   uidt: getColumnUiType(base, column),
@@ -617,15 +626,15 @@ export async function metaDiffSync(req, res) {
               const columns = (
                 await sqlClient.columnList({ tn: table_name })
               )?.data?.list?.map((c) => ({ ...c, column_name: c.cn }));
-  
+
               mapDefaultPrimaryValue(columns);
-  
+
               const model = await Model.insert(project.id, base.id, {
                 table_name: table_name,
                 title: getTableNameAlias(table_name, project.prefix, base),
                 type: ModelTypes.VIEW,
               });
-  
+
               for (const column of columns) {
                 await Column.insert({
                   uidt: getColumnUiType(base, column),
@@ -657,7 +666,7 @@ export async function metaDiffSync(req, res) {
             // update old
             // populateParams.tableNames.push({ tn });
             // populateParams.oldMetas[tn] = oldMetas.find(m => m.tn === tn);
-  
+
             break;
           case MetaDiffType.TABLE_COLUMN_TYPE_CHANGE:
           case MetaDiffType.VIEW_COLUMN_TYPE_CHANGE:
@@ -698,17 +707,21 @@ export async function metaDiffSync(req, res) {
                 });
                 const parentCol = await parentModel
                   .getColumns()
-                  .then((cols) => cols.find((c) => c.column_name === change.rcn));
+                  .then((cols) =>
+                    cols.find((c) => c.column_name === change.rcn)
+                  );
                 const childCol = await childModel
                   .getColumns()
-                  .then((cols) => cols.find((c) => c.column_name === change.cn));
-  
+                  .then((cols) =>
+                    cols.find((c) => c.column_name === change.cn)
+                  );
+
                 await Column.update(childCol.id, {
                   ...childCol,
                   uidt: UITypes.ForeignKey,
                   system: true,
                 });
-  
+
                 if (change.relationType === RelationTypes.BELONGS_TO) {
                   const title = getUniqueColumnAliasName(
                     childModel.columns,
@@ -746,9 +759,9 @@ export async function metaDiffSync(req, res) {
         }
       }
     }
-  
+
     await NcHelp.executeOperations(virtualColumnInsert, base.type);
-  
+
     // populate m2m relations
     await extractAndGenerateManyToManyRelations(await base.getModels());
   }
@@ -784,7 +797,11 @@ export async function baseMetaDiffSync(req, res) {
 
             const model = await Model.insert(project.id, base.id, {
               table_name: table_name,
-              title: getTableNameAlias(table_name, base.is_meta ? project.prefix : '', base),
+              title: getTableNameAlias(
+                table_name,
+                base.is_meta ? project.prefix : '',
+                base
+              ),
               type: ModelTypes.TABLE,
             });
 

From b52164d70d36c985b6c645f0e1fe718a91ee1285 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 12:33:32 +0530
Subject: [PATCH 35/41] fix(playwright): view title correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 tests/playwright/tests/views.spec.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/tests/playwright/tests/views.spec.ts b/tests/playwright/tests/views.spec.ts
index df6707c5a5..b00f98848c 100644
--- a/tests/playwright/tests/views.spec.ts
+++ b/tests/playwright/tests/views.spec.ts
@@ -45,15 +45,16 @@ test.describe('Views CRUD Operations', () => {
       newTitle: 'CityGallery2',
     });
 
-    await dashboard.viewSidebar.changeViewIcon({
-      title: 'CityGallery',
-      icon: 'american-football',
-    });
     await dashboard.viewSidebar.verifyView({
       title: 'CityGallery2',
       index: 3,
     });
 
+    await dashboard.viewSidebar.changeViewIcon({
+      title: 'CityGallery2',
+      icon: 'american-football',
+    });
+
     // todo: Enable when view bug is fixed
     // await dashboard.viewSidebar.reorderViews({
     //   sourceView: "CityGrid",

From 9fde794388d8b5ba9498f6ab6cf59c2a680f68b0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 13:29:19 +0530
Subject: [PATCH 36/41] fix(playwright): use regex pattern

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
index 140e1eb3f5..a6c32d6033 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
@@ -21,7 +21,7 @@ export class ChildList extends BasePage {
     //    icon: reload
     await expect(this.get().locator(`.ant-modal-title`)).toHaveText(`Child list`);
     await expect(
-      await this.get().locator(`button:has-text("Link to"):hasText("${linkField}'")`).isVisible()
+      await this.get().locator(`button:text-matches("Link to '.*${linkField}'", "i")`).isVisible()
     ).toBeTruthy();
     await expect(await this.get().locator(`[data-testid="nc-child-list-reload"]`).isVisible()).toBeTruthy();
 
@@ -52,7 +52,7 @@ export class ChildList extends BasePage {
   }
 
   async openLinkRecord({ linkTableTitle }: { linkTableTitle: string }) {
-    const openActions = this.get().locator(`button:has-text("Link to '${linkTableTitle}'")`).click();
+    const openActions = this.get().locator(`:text-matches("Link to '.*${linkTableTitle}'", "i")`).click();
     await this.waitForResponse({
       requestUrlPathToMatch: '/exclude',
       httpMethodsToMatch: ['GET'],

From 69dc9feeeea2ccf07b9705c089e2ecbe5cc7f511 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 13:53:00 +0530
Subject: [PATCH 37/41] test(playwright): selector correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/Dashboard/Grid/Column/LTAR/ChildList.ts           | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
index a6c32d6033..22dd01ede9 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/ChildList.ts
@@ -20,9 +20,7 @@ export class ChildList extends BasePage {
     //    button: Link to 'City'
     //    icon: reload
     await expect(this.get().locator(`.ant-modal-title`)).toHaveText(`Child list`);
-    await expect(
-      await this.get().locator(`button:text-matches("Link to '.*${linkField}'", "i")`).isVisible()
-    ).toBeTruthy();
+    await expect(await this.get().locator(`text=/Link to '.*${linkField}'/i`).isVisible()).toBeTruthy();
     await expect(await this.get().locator(`[data-testid="nc-child-list-reload"]`).isVisible()).toBeTruthy();
 
     // child list body validation (card count, card title)
@@ -52,7 +50,7 @@ export class ChildList extends BasePage {
   }
 
   async openLinkRecord({ linkTableTitle }: { linkTableTitle: string }) {
-    const openActions = this.get().locator(`:text-matches("Link to '.*${linkTableTitle}'", "i")`).click();
+    const openActions = this.get().locator(`text=/Link to '.*${linkTableTitle}'/i`).click();
     await this.waitForResponse({
       requestUrlPathToMatch: '/exclude',
       httpMethodsToMatch: ['GET'],

From 0021e90864275c5cffd0aec4c74ba7e5976a7761 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 15:05:40 +0530
Subject: [PATCH 38/41] fix(gui): use title for existing table in meta diff

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/settings/Metadata.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 01355ef1c4..54313a52d5 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -69,9 +69,7 @@ const columns = [
   {
     // Models
     title: tableHeaderRenderer(t('labels.models')),
-    key: 'table_name',
-    customRender: ({ record }: { record: { table_name: string; title?: string } }) =>
-      h('div', {}, record.title || record.table_name),
+    key: 'table_name'
   },
   {
     // Sync state
@@ -122,7 +120,7 @@ const columns = [
                 <div class="min-w-5 flex items-center justify-center">
                   <GeneralTableIcon :meta="record" class="text-gray-500"></GeneralTableIcon>
                 </div>
-                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record.table_name }}</span>
+                <span class="overflow-ellipsis min-w-0 shrink-1">{{ record.title || record.table_name }}</span>
               </div>
             </div>
           </template>

From 21c6b3bf80cec1e0d6c3e73a31f2e7ca79a6cb45 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 16:13:04 +0530
Subject: [PATCH 39/41] fix(gui): increase icon size in skeleton view

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/dashboard/settings/Metadata.vue | 2 +-
 packages/nc-gui/components/erd/TableNode.vue               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 54313a52d5..b15c07b9e8 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -69,7 +69,7 @@ const columns = [
   {
     // Models
     title: tableHeaderRenderer(t('labels.models')),
-    key: 'table_name'
+    key: 'table_name',
   },
   {
     // Sync state
diff --git a/packages/nc-gui/components/erd/TableNode.vue b/packages/nc-gui/components/erd/TableNode.vue
index 359da0f4c5..68f2c7d287 100644
--- a/packages/nc-gui/components/erd/TableNode.vue
+++ b/packages/nc-gui/components/erd/TableNode.vue
@@ -59,7 +59,7 @@ watch(
         :class="[showSkeleton ? '' : 'bg-primary bg-opacity-10', hasColumns ? 'border-b-1' : '']"
         class="text-slate-600 text-md py-2 border-slate-500 rounded-t-lg w-full h-full px-3 font-semibold flex items-center"
       >
-        <GeneralTableIcon class="text-primary" :meta="table" />
+        <GeneralTableIcon class="text-primary" :class="{ '!text-6xl !w-auto mr-2': showSkeleton }" :meta="table" />
         <div :class="showSkeleton ? 'text-6xl' : ''" class="flex pr-2 pl-1">
           {{ table.title }}
         </div>

From 8fe15ef4fbbdb6a9f477c9b1e29dd2d1d98d5e93 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 23 Dec 2022 16:57:41 +0530
Subject: [PATCH 40/41] refactor(gui): icon size and other requested changes

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/app.vue                                        | 1 -
 packages/nc-gui/components/general/TableIcon.vue               | 2 +-
 packages/nc-gui/components/general/ViewIcon.vue                | 2 +-
 packages/nc-gui/components/smartsheet/expanded-form/Header.vue | 2 +-
 packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue     | 2 +-
 packages/nc-gui/layouts/shared-view.vue                        | 2 +-
 6 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/app.vue b/packages/nc-gui/app.vue
index b3c147e5e1..32480b0839 100644
--- a/packages/nc-gui/app.vue
+++ b/packages/nc-gui/app.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import '@purge-icons/generated'
 import { applyNonSelectable, computed, useRoute, useTheme } from '#imports'
 
 const route = useRoute()
diff --git a/packages/nc-gui/components/general/TableIcon.vue b/packages/nc-gui/components/general/TableIcon.vue
index 732cf953c5..cfac78343b 100644
--- a/packages/nc-gui/components/general/TableIcon.vue
+++ b/packages/nc-gui/components/general/TableIcon.vue
@@ -13,7 +13,7 @@ const { meta: tableMeta } = defineProps<{
     :data-testid="`nc-icon-${tableMeta.meta?.icon}`"
     class="text-lg"
     :icon="tableMeta.meta?.icon"
-  ></IcIcon>
+  />
 
   <MdiEyeCircleOutline v-else-if="tableMeta?.type === 'view'" class="w-5" />
   <MdiTableLarge v-else class="w-5" />
diff --git a/packages/nc-gui/components/general/ViewIcon.vue b/packages/nc-gui/components/general/ViewIcon.vue
index 5d347ea34b..5e6a18b9dc 100644
--- a/packages/nc-gui/components/general/ViewIcon.vue
+++ b/packages/nc-gui/components/general/ViewIcon.vue
@@ -14,7 +14,7 @@ const { meta: viewMeta } = defineProps<{
     :data-testid="`nc-icon-${viewMeta?.meta?.icon}`"
     class="text-[16px]"
     :icon="viewMeta?.meta?.icon"
-  ></IcIcon>
+  />
   <component
     :is="viewIcons[viewMeta.type]?.icon"
     v-else
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 823d5f9800..c2379e4bc5 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -77,7 +77,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 <template>
   <div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header">
     <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
-      <GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2"></GeneralTableIcon>
+      <GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2" />
 
       <template v-if="meta">
         {{ meta.title }}
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index eb9d8a1d44..524824660b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -6,7 +6,7 @@ const selectedView = inject(ActiveViewInj)
 
 <template>
   <div class="flex gap-2 items-center ml-2 mr-2 pr-4 pb-1 py-0.5 border-r-1 border-gray-100">
-    <GeneralViewIcon class="nc-view-icon" :meta="selectedView"></GeneralViewIcon>
+    <GeneralViewIcon class="nc-view-icon" :meta="selectedView" />
 
     <span class="!text-sm font-medium max-w-36 overflow-ellipsis overflow-hidden whitespace-nowrap">
       {{ selectedView?.title }}
diff --git a/packages/nc-gui/layouts/shared-view.vue b/packages/nc-gui/layouts/shared-view.vue
index 797f68f5d4..cc4dd367f7 100644
--- a/packages/nc-gui/layouts/shared-view.vue
+++ b/packages/nc-gui/layouts/shared-view.vue
@@ -59,7 +59,7 @@ export default {
               </template>
 
               <div v-else class="text-xl font-semibold truncate text-white nc-shared-view-title flex gap-2 items-center">
-                <GeneralViewIcon class="!text-2xl" :meta="sharedView" />
+                <GeneralViewIcon class="!text-xl" :meta="sharedView" />
                 {{ sharedView?.title }}
               </div>
             </div>

From c28f061b8ef3e9abd9321b36068b5dd2f14455b2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 24 Dec 2022 12:54:15 +0530
Subject: [PATCH 41/41] fix(gui): convert parse/stringify methods into pure
 function

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nocodb/src/lib/models/Model.ts     | 38 ++++++-------------
 packages/nocodb/src/lib/models/View.ts      | 18 +++++----
 packages/nocodb/src/lib/utils/modelUtils.ts | 42 ++++++++-------------
 3 files changed, 38 insertions(+), 60 deletions(-)

diff --git a/packages/nocodb/src/lib/models/Model.ts b/packages/nocodb/src/lib/models/Model.ts
index 17d3160cb2..6d61e9a048 100644
--- a/packages/nocodb/src/lib/models/Model.ts
+++ b/packages/nocodb/src/lib/models/Model.ts
@@ -1,5 +1,5 @@
 import Noco from '../Noco';
-import { parseMetaProp } from '../utils/modelUtils'
+import { parseMetaProp } from '../utils/modelUtils';
 import Column from './Column';
 import NocoCache from '../cache/NocoCache';
 import { XKnex } from '../db/sql-data-mapper';
@@ -23,8 +23,6 @@ import { NcError } from '../meta/helpers/catchError';
 import Audit from './Audit';
 import { sanitize } from '../db/sql-data-mapper/lib/sql/helpers/sanitize';
 
-
-
 export default class Model implements TableType {
   copy_enabled: boolean;
   created_at: Date | number | string;
@@ -179,7 +177,10 @@ export default class Model implements TableType {
         }
       );
 
-      parseMetaProp(modelList);
+      // parse meta of each model
+      for (const model of modelList) {
+        model.meta = parseMetaProp(model);
+      }
 
       if (base_id) {
         await NocoCache.setList(
@@ -220,7 +221,10 @@ export default class Model implements TableType {
         MetaTable.MODELS
       );
 
-      parseMetaProp(modelList);
+      // parse meta of each model
+      for (const model of modelList) {
+        model.meta = parseMetaProp(model);
+      }
 
       await NocoCache.setList(CacheScope.MODEL, [project_id], modelList);
     }
@@ -244,7 +248,7 @@ export default class Model implements TableType {
       modelData = await ncMeta.metaGet2(null, null, MetaTable.MODELS, id);
 
       if (modelData) {
-        parseMetaProp(modelData);
+        modelData.meta = parseMetaProp(modelData);
         await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
       }
     }
@@ -272,25 +276,7 @@ export default class Model implements TableType {
       ));
     if (!modelData) {
       modelData = await ncMeta.metaGet2(null, null, MetaTable.MODELS, k);
-      parseMetaProp(modelData);
-      // if (
-      //   this.baseModels?.[modelData.base_id]?.[modelData.db_alias]?.[
-      //     modelData.title
-      //   ]
-      // ) {
-      //   delete this.baseModels[modelData.base_id][modelData.db_alias][
-      //     modelData.title
-      //   ];
-      // }
-      // if (
-      //   this.baseModels?.[modelData.base_id]?.[modelData.db_alias]?.[
-      //     modelData.id
-      //   ]
-      // ) {
-      //   delete this.baseModels[modelData.base_id][modelData.db_alias][
-      //     modelData.id
-      //   ];
-      // }
+      modelData.meta = parseMetaProp(modelData);
     }
     if (modelData) {
       await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
@@ -324,7 +310,7 @@ export default class Model implements TableType {
           table_name,
         }
       );
-      parseMetaProp(modelData);
+      modelData.meta = parseMetaProp(modelData);
       await NocoCache.set(`${CacheScope.MODEL}:${modelData.id}`, modelData);
       // modelData.filters = await Filter.getFilterObject({
       //   viewId: modelData.id
diff --git a/packages/nocodb/src/lib/models/View.ts b/packages/nocodb/src/lib/models/View.ts
index 1963ded461..51584fc342 100644
--- a/packages/nocodb/src/lib/models/View.ts
+++ b/packages/nocodb/src/lib/models/View.ts
@@ -119,7 +119,7 @@ export default class View implements ViewType {
       ));
     if (!view) {
       view = await ncMeta.metaGet2(null, null, MetaTable.VIEWS, viewId);
-      parseMetaProp(view);
+      view.meta = parseMetaProp(view);
       await NocoCache.set(`${CacheScope.VIEW}:${view.id}`, view);
     }
 
@@ -158,7 +158,7 @@ export default class View implements ViewType {
           ],
         }
       );
-      parseMetaProp(view);
+      view.meta = parseMetaProp(view);
       // todo: cache - titleOrId can be viewId so we need a different scope here
       await NocoCache.set(
         `${CacheScope.VIEW}:${fk_model_id}:${titleOrId}`,
@@ -191,7 +191,7 @@ export default class View implements ViewType {
         },
         null
       );
-      parseMetaProp(view);
+      view.meta = parseMetaProp(view);
       await NocoCache.set(`${CacheScope.VIEW}:${fk_model_id}:default`, view);
     }
     return view && new View(view);
@@ -208,7 +208,9 @@ export default class View implements ViewType {
           order: 'asc',
         },
       });
-      parseMetaProp(viewsList);
+      for (const view of viewsList) {
+        view.meta = parseMetaProp(view);
+      }
       await NocoCache.setList(CacheScope.VIEW, [modelId], viewsList);
     }
     viewsList.sort(
@@ -262,7 +264,7 @@ export default class View implements ViewType {
       meta: view.meta ?? {},
     };
 
-    stringifyMetaProp(insertObj);
+    insertObj.meta = stringifyMetaProp(insertObj);
 
     // get project and base id if missing
     if (!(view.project_id && view.base_id)) {
@@ -722,7 +724,7 @@ export default class View implements ViewType {
     });
 
     if (view) {
-      parseMetaProp(view);
+      view.meta = parseMetaProp(view);
     }
 
     return view && new View(view);
@@ -870,7 +872,9 @@ export default class View implements ViewType {
     }
 
     // if meta data defined then stringify it
-    stringifyMetaProp(updateObj);
+    if ('meta' in updateObj) {
+      updateObj.meta = stringifyMetaProp(updateObj);
+    }
 
     // set meta
     await ncMeta.metaUpdate(null, null, MetaTable.VIEWS, updateObj, viewId);
diff --git a/packages/nocodb/src/lib/utils/modelUtils.ts b/packages/nocodb/src/lib/utils/modelUtils.ts
index 130e081f0a..3e74d76c80 100644
--- a/packages/nocodb/src/lib/utils/modelUtils.ts
+++ b/packages/nocodb/src/lib/utils/modelUtils.ts
@@ -1,35 +1,23 @@
-export function parseMetaProp(
-  modelOrModelList: { meta: any } | { meta: any }[]
-) {
-  if (!modelOrModelList) return;
+export function parseMetaProp(model: { meta: any }): any {
+  if (!model) return;
 
   // parse meta property
-  for (const model of Array.isArray(modelOrModelList)
-    ? modelOrModelList
-    : [modelOrModelList]) {
-    try {
-      model.meta =
-        typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta;
-    } catch {
-      model.meta = {};
-    }
+  try {
+    return typeof model.meta === 'string' ? JSON.parse(model.meta) : model.meta;
+  } catch {
+    return {};
   }
 }
 
-export function stringifyMetaProp(
-  modelOrModelList: { meta?: any } | { meta?: any }[]
-) {
-  if (!modelOrModelList) return;
+export function stringifyMetaProp(model: { meta?: any }): string | void {
+  if (!model) return;
 
-  // parse meta property
-  for (const model of Array.isArray(modelOrModelList)
-    ? modelOrModelList
-    : [modelOrModelList]) {
-    try {
-      model.meta =
-        typeof model.meta === 'string' ? model.meta : JSON.stringify(model.meta);
-    } catch (e) {
-      model.meta = '{}';
-    }
+  // stringify meta property
+  try {
+    return typeof model.meta === 'string'
+      ? model.meta
+      : JSON.stringify(model.meta);
+  } catch (e) {
+    return '{}';
   }
 }