Like so instead

client/src/ui/components/BdSettings.vue

@@ -20,10 +20,10 @@
                 <div class="bd-info">
                     <span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
                     <div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
-                        <MaterialIcon name="github-circle" size="16"/>
+                        <MiGithubCircle size="16"/>
                     </div>
                     <div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
-                        <MaterialIcon name="web" size="16"/>
+                        <MiWeb size="16"/>
                      </div>
                 </div>
             </Sidebar>
@@ -53,9 +53,7 @@
     import { Settings } from 'modules';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
     import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
-    import { SvgX, MaterialIcon } from './common';
-    import MiGithub from 'vue-material-design-icons/github-circle.vue';
-    import MiWeb from 'vue-material-design-icons/web.vue';
+    import { SvgX, MiGithubCircle, MiWeb } from './common';
 
     // Constants
     const sidebarItems = [
@@ -88,7 +86,7 @@
         },
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
-            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MaterialIcon,
+            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb,
             SvgX
         },
         methods: {

client/src/ui/components/bd/PluginCard.vue

@@ -25,16 +25,16 @@
                 <div class="bd-controls">
                     <ButtonGroup>
                         <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
-                            <MaterialIcon name="settings" size="18"/>
+                            <MiSettings size="18"/>
                         </Button>
                         <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
-                            <MaterialIcon name="refresh" size="18" />
+                            <MiRefresh size="18" />
                         </Button>
                         <Button v-tooltip="'Edit'" :onClick="editPlugin">
-                            <MaterialIcon name="pencil" size="18" />
+                            <MiPencil size="18" />
                         </Button>
                         <Button v-tooltip="'Uninstall'" type="err">
-                            <MaterialIcon name="delete" size="18" />
+                            <MiDelete size="18" />
                         </Button>
                     </ButtonGroup>
                 </div>
@@ -45,7 +45,7 @@
 <script>
     // Imports
     import { shell } from 'electron';
-    import { Button, ButtonGroup, SettingSwitch, MaterialIcon } from '../common';
+    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete } from '../common';
 
     export default {
         data() {
@@ -55,7 +55,7 @@
         },
         props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
         components: {
-            Button, ButtonGroup, SettingSwitch, MaterialIcon
+            Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete
         },
         methods: {
             editPlugin() {

client/src/ui/components/common/MaterialIcon.js

@@ -0,0 +1,6 @@
+export { default as MiSettings } from './materialicons/Settings.vue';
+export { default as MiRefresh } from './materialicons/Refresh.vue';
+export { default as MiPencil } from './materialicons/Pencil.vue';
+export { default as MiDelete } from './materialicons/Delete.vue';
+export { default as MiGithubCircle } from './materialicons/GithubCircle.vue';
+export { default as MiWeb } from './materialicons/Web.vue';

client/src/ui/components/common/MaterialIcon.vue

@@ -1,30 +0,0 @@
-<template>
-    <Settings v-if="name === 'settings'" :size="size"/>
-    <Refresh v-else-if="name === 'refresh'" :size="size" />
-    <Pencil v-else-if="name === 'pencil'" :size="size"/>
-    <Delete v-else-if="name === 'delete'" :size="size" />
-    <GithubCircle v-else-if="name === 'github-circle'" :size="size" />
-    <Web v-else-if="name === 'web'" :size="size" />
-    <span v-else></span>
-</template>
-<script>
-    // Imports
-    import Settings from './materialicons/Settings.vue';
-    import Refresh from './materialicons/Refresh.vue';
-    import Pencil from './materialicons/Pencil.vue';
-    import Delete from './materialicons/Delete.vue';
-    import GithubCircle from './materialicons/GithubCircle.vue';
-    import Web from './materialicons/Web.vue';
-
-    export default {
-        props: ['name', 'size'],
-        components: {
-            Settings,
-            Refresh,
-            Pencil,
-            Delete,
-            GithubCircle,
-            Web
-        }
-    }
-</script>

client/src/ui/components/common/index.js

@@ -5,4 +5,4 @@ export { default as ButtonGroup } from './ButtonGroup.vue';
 export { default as Button } from './Button.vue';
 export { default as Modal } from './Modal.vue';
 export { default as SvgX } from './SvgX.vue';
-export { default as MaterialIcon } from './MaterialIcon.vue';
+export * from './MaterialIcon';