[Icons] Update Font Sheet (#1245)

* [Icons] Update Font Sheet

* Added import statement for styles

* updated to clone icon

* Changed save to save changes icon

* Revert to using base bwi class

* Updated import order for bwi icon styles

* Converted new account switcher ui updates

* Bump jslib

* Fix occurances where bwi-eye-slash was used instead of btw-eye-slash-2

* Move settings cog to the left side

* Updated eye/eye-slash icon references

* Update jslib

* Update jslib

* Update fallback image for cipher icon

* Update jslib

Co-authored-by: Hinton <oscar@oscarhinton.com>

src/scss/buttons.scss

@@ -93,7 +93,7 @@
   position: relative;
   overflow: hidden;
 
-  .fa-spinner {
+  .bwi-spinner {
     position: absolute;
     display: none;
     align-items: center;
@@ -106,7 +106,7 @@
 
   &:disabled:not(.manual),
   &.loading {
-    .fa-spinner {
+    .bwi-spinner {
       display: flex;
     }
 

src/scss/header.scss

@@ -30,7 +30,7 @@
     text-align: left;
     position: relative;
 
-    .fa {
+    .bwi {
       position: absolute;
       top: 7px;
       left: 15px;

src/scss/modal.scss

@@ -222,7 +222,7 @@ $close-text-shadow: 0 1px 0 $white !default;
     display: flex;
     align-items: center;
 
-    .fa {
+    .bwi {
       margin-right: 5px;
     }
   }

src/scss/plugins.scss

@@ -1,5 +1,3 @@
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome.scss";
 @import "~ngx-toastr/toastr";
 @import "~sweetalert2/src/sweetalert2.scss";
 
@@ -32,7 +30,7 @@ $fa-font-path: "~font-awesome/fonts";
     .icon i::before {
       float: left;
       font-style: normal;
-      font-family: FontAwesome;
+      font-family: $icomoon-font-family;
       font-size: 25px;
       line-height: 20px;
       padding-right: 15px;
@@ -55,7 +53,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i::before {
-        content: "\f0e7";
+        content: map_get($icons, "error");
       }
     }
 
@@ -65,7 +63,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i::before {
-        content: "\f071";
+        content: map_get($icons, "exclamation-triangle");
       }
     }
 
@@ -75,7 +73,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i:before {
-        content: "\f05a";
+        content: map_get($icons, "info-circle");
       }
     }
 
@@ -85,7 +83,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i:before {
-        content: "\f00C";
+        content: map_get($icons, "check");
       }
     }
   }

src/scss/styles.scss

@@ -1,4 +1,5 @@
 @import "../../jslib/angular/src/scss/webfonts.css";
+@import "../../jslib/angular/src/scss/bwicons/styles/style.scss";
 @import "~@angular/cdk/overlay-prebuilt.css";
 @import "variables.scss";
 @import "base.scss";
@@ -13,5 +14,4 @@
 @import "plugins.scss";
 @import "environment.scss";
 @import "header.scss";
-
 @import "../../jslib/angular/src/scss/icons.scss";

src/scss/vault.scss

@@ -93,7 +93,7 @@ app-root {
       }
     }
 
-    ul:not(.fa-ul) {
+    ul:not(.bwi-ul) {
       li {
         margin: 0;
         padding: 0;
@@ -101,11 +101,11 @@ app-root {
       }
     }
 
-    ul.fa-ul {
+    ul.bwi-ul {
       li {
         word-break: break-all;
 
-        .fa-li {
+        .bwi-li {
           top: 8px;
           width: 1.1em;
         }
@@ -113,18 +113,18 @@ app-root {
     }
 
     // Nested indentions
-    ul.fa-ul {
+    ul.bwi-ul {
       // Level 1
       li {
         > a {
           padding-left: 12px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: -4px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 11px;
         }
       }
@@ -135,11 +135,11 @@ app-root {
           padding-left: 23px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: 7px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 22px;
         }
       }
@@ -150,11 +150,11 @@ app-root {
           padding-left: 34px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: 18px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 33px;
         }
       }
@@ -165,11 +165,11 @@ app-root {
           padding-left: 45px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: 29px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 44px;
         }
       }
@@ -180,11 +180,11 @@ app-root {
           padding-left: 56px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: 40px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 55px;
         }
       }
@@ -195,11 +195,11 @@ app-root {
           padding-left: 67px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: 51px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 66px;
         }
       }
@@ -210,11 +210,11 @@ app-root {
           padding-left: 78px;
         }
 
-        .fa-li {
+        .bwi-li {
           left: 62px;
         }
 
-        &.active > a .fa-li {
+        &.active > a .bwi-li {
           left: 77px;
         }
       }
@@ -309,7 +309,7 @@ app-root {
         }
       }
 
-      .fa {
+      .bwi {
         margin-bottom: 10px;
 
         @include themify($themes) {