ayanova/src/plugins/vuetify.js

@@ -13,8 +13,13 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
 import {
   faBars,
-  faUser,
+  faCaretDown,
+  faChevronDown,
   faEllipsisV,
+  faEye,
+  faEyeSlash,
+  faInfoCircle,
+  faUser,
   faKey,
   faQuestionCircle,
   faSignInAlt
@@ -22,7 +27,19 @@ import {
 //import { faUserCircle as farUserCircle } from "@fortawesome/free-regular-svg-icons";
 Vue.component("font-awesome-icon", FontAwesomeIcon);
 
-library.add(faBars, faKey, faQuestionCircle, faSignInAlt, faUser, faEllipsisV);
+library.add(
+  faBars,
+  faCaretDown,
+  faChevronDown,
+  faEllipsisV,
+  faEye,
+  faEyeSlash,
+  faInfoCircle,
+  faKey,
+  faQuestionCircle,
+  faSignInAlt,
+  faUser
+);
 
 const CUSTOM_ICONS = {
   ayiQuestionCircle: {
@@ -31,6 +48,18 @@ const CUSTOM_ICONS = {
       icon: ["fas", "question-circle"]
     }
   },
+  ayiEye: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "eye"]
+    }
+  },
+  ayiEyeSlash: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "eye-slash"]
+    }
+  },
   ayiEllipsisV: {
     component: FontAwesomeIcon,
     props: {
@@ -55,12 +84,31 @@ const CUSTOM_ICONS = {
       icon: ["fas", "user"]
     }
   },
+  //VUETIFY REQUIRED ONES
+  //https://vuetifyjs.com/en/features/icons/#using-custom-icons
+  dropdown: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "caret-down"]
+    }
+  },
+  info: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "info-circle"]
+    }
+  },
   menu: {
-    // used for the nav-icon by vuetify
     component: FontAwesomeIcon,
     props: {
       icon: ["fas", "bars"]
     }
+  },
+  sort: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "chevron-down"]
+    }
   }
 };
 //-------------

ayanova/src/views/login.vue

@@ -57,7 +57,7 @@
               >
               </v-select>
             </v-col>
-            <v-col cols="12" md="7">           
+            <v-col cols="12" md="7">
               <v-text-field
                 name="username"
                 id="username"
@@ -78,7 +78,7 @@
                 name="password"
                 id="password"
                 v-model="input.password"
-                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
+                :append-outer-icon="reveal ? '$ayiEye' : '$ayiEyeSlash'"
                 prepend-icon="$ayiKey"
                 :type="reveal ? 'text' : 'password'"
                 :error="errorBadCreds"