Made custom svg icons work anywhere a regular icon would work

app/imports/constants/SVG_ICONS.js

@@ -4,7 +4,7 @@ const SVG_ICONS = Object.freeze({
     shape: 'M37 73v382h18V73zm418.045 0l1.91 382h18l-1.91-382zM105 160c-14.638 0-27.157 9.715-31.43 23-2.405 6.634-1.479 14.38-.574 18 3.61 14.3 16.641 25 32.004 25 14.17 0 26.36-9.102 31-21.736C140.64 216.898 152.83 226 167 226c15.363 0 28.394-10.7 32.004-25h238.682l-.09-18H198.43c-4.273-13.285-16.792-23-31.43-23-14.17 0-26.36 9.102-31 21.736C131.36 169.102 119.17 160 105 160zm0 18c8.39 0 15 6.61 15 15s-6.61 15-15 15-15-6.61-15-15 6.61-15 15-15zm62 0c8.39 0 17 6.61 17 15s-8.61 15-17 15-15-6.61-15-15 6.61-15 15-15zm33 45c-15.002 0-27.775 10.206-31.729 24H73v18h95.271c3.954 13.794 16.727 24 31.729 24 15.002 0 27.775-10.206 31.729-24h206.277l-.092-18H231.73c-3.954-13.794-16.727-24-31.729-24zm0 18c8.39 0 15 6.61 15 15s-6.61 15-15 15-15-6.61-15-15 6.61-15 15-15zm83 47c-14.638 0-27.157 9.715-31.43 23H73v18h177.996c3.61 14.3 16.641 25 32.004 25 14.17 0 26.36-9.102 31-21.736C318.64 344.898 330.83 354 345 354c14.17 0 26.36-9.102 31-21.736C380.64 344.898 392.83 354 407 354c15.363 0 28.394-10.7 32.004-25 1.31-3.077.621-13.458-.77-18C432 294.406 418.467 288.286 407 288c-14.17 0-26.36 9.102-31 21.736C371.36 297.102 359.17 288 345 288c-14.17 0-26.36 9.102-31 21.736C309.36 297.102 297.17 288 283 288zm62 66c-13.892 0-25.874 8.752-30.71 21H73v18h239.564c2.853 15.29 16.366 27 32.436 27s29.583-11.71 32.436-27h61.209l-.09-18H375.71c-4.837-12.248-16.819-21-30.711-21zm-62-48c8.39 0 15 6.61 15 15s-6.61 15-15 15-15-6.61-15-15 6.61-15 15-15zm62 0c8.39 0 15 6.61 15 15s-6.61 15-15 15-15-6.61-15-15 6.61-15 15-15zm62 0c8.39 0 15 6.61 15 15s-6.61 15-15 15-15-6.61-15-15 6.61-15 15-15zm-62 66c8.39 0 15 6.61 15 15s-6.61 15-15 15-15-6.61-15-15 6.61-15 15-15zM25 473v16h462v-16z',
   },
   'two-coins': {
-    name:'two-coins',
+    name:'two_coins',
     shape:'M264.4 95.01c-35.6-.06-80.2 11.19-124.2 34.09C96.27 152 61.45 182 41.01 211.3c-20.45 29.2-25.98 56.4-15.92 75.8 10.07 19.3 35.53 30.4 71.22 30.4 35.69.1 80.29-11.2 124.19-34 44-22.9 78.8-53 99.2-82.2 20.5-29.2 25.9-56.4 15.9-75.8-10.1-19.3-35.5-30.49-71.2-30.49zm91.9 70.29c-3.5 15.3-11.1 31-21.8 46.3-22.6 32.3-59.5 63.8-105.7 87.8-46.2 24.1-93.1 36.2-132.5 36.2-18.6 0-35.84-2.8-50.37-8.7l10.59 20.4c10.08 19.4 35.47 30.5 71.18 30.5 35.7 0 80.3-11.2 124.2-34.1 44-22.8 78.8-52.9 99.2-82.2 20.4-29.2 26-56.4 15.9-75.7zm28.8 16.8c11.2 26.7 2.2 59.2-19.2 89.7-18.9 27.1-47.8 53.4-83.6 75.4 11.1 1.2 22.7 1.8 34.5 1.8 49.5 0 94.3-10.6 125.9-27.1 31.7-16.5 49.1-38.1 49.1-59.9 0-21.8-17.4-43.4-49.1-59.9-16.1-8.4-35.7-15.3-57.6-20zm106.7 124.8c-10.2 11.9-24.2 22.4-40.7 31-35 18.2-82.2 29.1-134.3 29.1-21.2 0-41.6-1.8-60.7-5.2-23.2 11.7-46.5 20.4-68.9 26.1 1.2.7 2.4 1.3 3.7 2 31.6 16.5 76.4 27.1 125.9 27.1s94.3-10.6 125.9-27.1c31.7-16.5 49.1-38.1 49.1-59.9z',
   },
   'cash': {

app/imports/ui/components/global/SvgIcon.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <i
+    ref="icon"
     aria-hidden
     role="img"
     class="v-icon"
@@ -50,6 +51,9 @@ export default {
     large: Boolean,
     xLarge: Boolean,
   },
+  data(){return {
+    inheritedSize: undefined,
+  }},
   computed: {
     isDark () {
       if (this.dark === true) {
@@ -70,6 +74,7 @@ export default {
       }
     },
     size() {
+      if (this.inheritedSize) return this.inheritedSize;
       if (this.xSmall) return SIZE_MAP['xSmall'];
       if (this.small)  return SIZE_MAP['small'];
       if (this.medium) return SIZE_MAP['medium'];
@@ -77,6 +82,9 @@ export default {
       if (this.xLarge) return SIZE_MAP['xLarge'];
       return SIZE_MAP['default'];
     },
+  },
+  mounted(){
+    this.inheritedSize = this.$refs.icon.style.fontSize;
   }
 }
 </script>

app/imports/ui/icons/IconAdmin.vue

@@ -7,6 +7,11 @@
             column
             align-center
           >
+            <v-icon>$vuetify.icons.abacus</v-icon>
+            <v-input
+              prepend-icon="$vuetify.icons.abacus"
+              label="cat"
+            />
             <upload-btn
               title="Metadata JSON"
               @file-update="metadataFileChanged"
@@ -40,6 +45,9 @@
       searchString: '',
       testIcon: undefined,
     }},
+    mounted(){
+      console.log(this.$vuetify);
+    },
     methods: {
       fileChanged (file) {
         importIcons(file);

app/imports/ui/icons/SvgIconByName.vue

@@ -0,0 +1,30 @@
+<template lang="html">
+  <svg-icon
+    :shape="shape"
+  />
+</template>
+
+<script>
+import SvgIcon from '/imports/ui/components/global/SvgIcon.vue'
+import SVG_ICONS from '/imports/constants/SVG_ICONS.js';
+
+export default {
+  components: {
+    SvgIcon,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    shape(){
+      return SVG_ICONS[this.name].shape;
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>