New icon system working with login form and tested in app.vue with hamburger and vertical ellipsis; just need to roll out throughout the app and import each icon individually.

ayanova/src/plugins/vuetify.js

@@ -1,8 +1,62 @@
 /* xeslint-disable */
-// import "@fortawesome/fontawesome-free/css/all.css"; // Ensure you are using css-loader
+
 import Vue from "vue";
 import Vuetify from "vuetify/lib";
-//import myLang from "../api/en";
+
+//---------------------------
+//ICONS
+//tree shaking compatible icon method
+//https://stackoverflow.com/a/58261449/8939
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
+import {
+  faBars,
+  faUser,
+  faEllipsisV,
+  faKey,
+  faQuestionCircle
+} from "@fortawesome/free-solid-svg-icons";
+//import { faUserCircle as farUserCircle } from "@fortawesome/free-regular-svg-icons";
+Vue.component("font-awesome-icon", FontAwesomeIcon);
+
+library.add(faBars, faKey, faQuestionCircle, faUser, faEllipsisV);
+
+const CUSTOM_ICONS = {
+  ayiQuestionCircle: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "question-circle"]
+    }
+  },
+  ayiEllipsisV: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "ellipsis-v"]
+    }
+  },
+  ayiKey: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "key"]
+    }
+  },
+  ayiUser: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "user"]
+    }
+  },
+  menu: {
+    // used for the nav-icon by vuetify
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "bars"]
+    }
+  }
+};
+//-------------
 
 Vue.use(Vuetify);
 
@@ -39,13 +93,7 @@ export default new Vuetify({
     }
   },
   icons: {
-    iconfont: "fa"
+    iconfont: "faSvg",
+    values: CUSTOM_ICONS
   }
 });
-
-// export default new Vuetify({
-//   lang: {
-//     locales: { zhHans, pl, sv },
-//     current: 'zhHans',
-//   },
-// })