[Icons] Update Font Sheet (#1343)

* [Icons] Update to new font sheet

* Rebased - updated all icon remaining icon references

* Temporarily Updating gitmodules branch

* Fixed class reference

* Revert temporary gitmodule branch

* Icon updates/changes

* Pull jslib m-icon-updates latest

* Prettier

* Update jslib to master

* Reset jslib to master

* Removed obsolete variable reference, replaced bolt references

* Removed all instances of base class - maps create automatically

* Updated toast icon references

* Imported styles to reference variable/map

* Reverted to using base class

* Update jslib

* Rename eye-2 to eye and eye-slash-2 to eye-slash

* Bump jslib

* Remove duplicate scss

* Remove old fa

* Update fallback image

* Bump jslib

* Rename eye-2 to eye, and eye-slash-2 to eye-slash

* Fix 404

* Fix integrity of bootstrap.min.css

* Fix callout missing bwi

* Add bwi to change-kdf

* Remove bwi from callout again

* Bump jslib

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

src/app/vault/groupings.component.html

@@ -8,7 +8,7 @@
       rel="noopener"
       appA11yTitle="{{ 'learnMore' | i18n }}"
     >
-      <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
     </a>
   </div>
   <div class="card-body">
@@ -22,48 +22,48 @@
       autocomplete="off"
       appAutofocus
     />
-    <ul class="fa-ul card-ul">
+    <ul class="bwi-ul card-ul">
       <li [ngClass]="{ active: selectedAll }">
         <a href="#" appStopClick (click)="selectAll()">
-          <i class="fa-li fa fa-fw fa-th"></i>{{ "allItems" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-filter"></i>{{ "allItems" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedFavorites }" *ngIf="showFavorites">
         <a href="#" appStopClick (click)="selectFavorites()">
-          <i class="fa-li fa fa-fw fa-star"></i>{{ "favorites" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-star-f"></i>{{ "favorites" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedTrash }" *ngIf="showTrash">
         <a href="#" appStopClick (click)="selectTrash()">
-          <i class="fa-li fa fa-fw fa-trash-o"></i>{{ "trash" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-trash"></i>{{ "trash" | i18n }}
         </a>
       </li>
     </ul>
     <h3>{{ "types" | i18n }}</h3>
-    <ul class="fa-ul card-ul">
+    <ul class="bwi-ul card-ul">
       <li [ngClass]="{ active: selectedType === cipherType.Login }">
         <a href="#" appStopClick (click)="selectType(cipherType.Login)">
-          <i class="fa-li fa fa-fw fa-globe"></i>{{ "typeLogin" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-globe"></i>{{ "typeLogin" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.Card }">
         <a href="#" appStopClick (click)="selectType(cipherType.Card)">
-          <i class="fa-li fa fa-fw fa-credit-card"></i>{{ "typeCard" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-credit-card"></i>{{ "typeCard" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.Identity }">
         <a href="#" appStopClick (click)="selectType(cipherType.Identity)">
-          <i class="fa-li fa fa-fw fa-id-card-o"></i>{{ "typeIdentity" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-id-card"></i>{{ "typeIdentity" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
         <a href="#" appStopClick (click)="selectType(cipherType.SecureNote)">
-          <i class="fa-li fa fa-fw fa-sticky-note-o"></i>{{ "typeSecureNote" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-sticky-note"></i>{{ "typeSecureNote" | i18n }}
         </a>
       </li>
     </ul>
     <p *ngIf="!loaded" class="text-muted">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span class="sr-only">{{ "loading" | i18n }}</span>
     </p>
     <ng-container *ngIf="loaded">
@@ -77,10 +77,10 @@
             (click)="addFolder()"
             appA11yTitle="{{ 'addFolder' | i18n }}"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
           </a>
         </h3>
-        <ul class="fa-ul card-ul">
+        <ul class="bwi-ul card-ul">
           <ng-template #recursiveFolders let-folders>
             <li
               *ngFor="let f of folders"
@@ -89,18 +89,18 @@
               <div class="d-flex">
                 <i
                   *ngIf="f.children.length"
-                  class="fa-li fa"
+                  class="bwi-li bwi"
                   title="{{ 'toggleCollapse' | i18n }}"
                   [ngClass]="{
-                    'fa-caret-right': isCollapsed(f.node),
-                    'fa-caret-down': !isCollapsed(f.node)
+                    'bwi-caret-right': isCollapsed(f.node),
+                    'bwi-caret-down': !isCollapsed(f.node)
                   }"
                   (click)="collapse(f.node)"
                 ></i>
                 <a href="#" class="text-break" appStopClick (click)="selectFolder(f.node)">
                   <i
                     *ngIf="f.children.length === 0"
-                    class="fa-li fa fa-folder-o"
+                    class="bwi bwi-li bwi-folder"
                     aria-hidden="true"
                   ></i
                   >{{ f.node.name }}
@@ -113,10 +113,10 @@
                   appA11yTitle="{{ 'editFolder' | i18n }}"
                   *ngIf="f.node.id"
                 >
-                  <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
+                  <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
                 </a>
               </div>
-              <ul class="fa-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
+              <ul class="bwi-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
                 <ng-container
                   *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }"
                 >
@@ -130,7 +130,7 @@
       </ng-container>
       <ng-container *ngIf="showCollections && collections && collections.length">
         <h3>{{ "collections" | i18n }}</h3>
-        <ul class="fa-ul card-ul">
+        <ul class="bwi-ul card-ul">
           <ng-template #recursiveCollections let-collections>
             <li
               *ngFor="let c of collections"
@@ -138,19 +138,23 @@
             >
               <i
                 *ngIf="c.children.length"
-                class="fa-li fa"
+                class="bwi-li bwi"
                 title="{{ 'toggleCollapse' | i18n }}"
                 [ngClass]="{
-                  'fa-caret-right': isCollapsed(c.node),
-                  'fa-caret-down': !isCollapsed(c.node)
+                  'bwi-caret-right': isCollapsed(c.node),
+                  'bwi-caret-down': !isCollapsed(c.node)
                 }"
                 (click)="collapse(c.node)"
               ></i>
               <a href="#" class="text-break" appStopClick (click)="selectCollection(c.node)">
-                <i *ngIf="c.children.length === 0" class="fa-li fa fa-cube" aria-hidden="true"></i
+                <i
+                  *ngIf="c.children.length === 0"
+                  class="bwi bwi-li bwi-collection"
+                  aria-hidden="true"
+                ></i
                 >{{ c.node.name }}
               </a>
-              <ul class="fa-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
+              <ul class="bwi-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
                 <ng-container
                   *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
                 >