[PM-32212] Migrate platform font icons to bit-icon (#18970)

* Changes on browser

* Changes on desktop

* Changes on web

* Fix chromatic story

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

apps/desktop/src/app/accounts/settings.component.html

@@ -16,16 +16,10 @@
                 [attr.aria-expanded]="showSecurity"
                 appAutofocus
               >
-                <i
-                  *ngIf="!showSecurity"
-                  class="bwi bwi-angle-right bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
-                <i
-                  *ngIf="showSecurity"
-                  class="bwi bwi-angle-down bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
+                <bit-icon
+                  [name]="showSecurity ? 'bwi-angle-down' : 'bwi-angle-right'"
+                  class="bwi-sm icon"
+                ></bit-icon>
                 {{ "security" | i18n }}
               </button>
             </h2>
@@ -147,16 +141,10 @@
                 (click)="showAccountPreferences = !showAccountPreferences"
                 [attr.aria-expanded]="showAccountPreferences"
               >
-                <i
-                  *ngIf="!showAccountPreferences"
-                  class="bwi bwi-angle-right bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
-                <i
-                  *ngIf="showAccountPreferences"
-                  class="bwi bwi-angle-down bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
+                <bit-icon
+                  [name]="showAccountPreferences ? 'bwi-angle-down' : 'bwi-angle-right'"
+                  class="bwi-sm icon"
+                ></bit-icon>
                 {{ "accountPreferences" | i18n }}
               </button>
             </h2>
@@ -222,16 +210,10 @@
                 (click)="showAppPreferences = !showAppPreferences"
                 [attr.aria-expanded]="showAppPreferences"
               >
-                <i
-                  *ngIf="!showAppPreferences"
-                  class="bwi bwi-angle-right bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
-                <i
-                  *ngIf="showAppPreferences"
-                  class="bwi bwi-angle-down bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
+                <bit-icon
+                  [name]="showAppPreferences ? 'bwi-angle-down' : 'bwi-angle-right'"
+                  class="bwi-sm icon"
+                ></bit-icon>
                 {{ "appPreferences" | i18n }}
               </button>
             </h2>

apps/desktop/src/app/accounts/settings.component.ts

@@ -45,6 +45,7 @@ import {
   DialogService,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   ItemModule,
   LinkModule,
   SectionComponent,
@@ -89,6 +90,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
     FormsModule,
     ReactiveFormsModule,
     IconButtonModule,
+    IconModule,
     ItemModule,
     JslibModule,
     LinkModule,

apps/desktop/src/app/layout/account-switcher.component.html

@@ -31,11 +31,7 @@
     <ng-template #noActiveAccount>
       <span>{{ "switchAccount" | i18n }}</span>
     </ng-template>
-    <i
-      class="bwi"
-      aria-hidden="true"
-      [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-angle-up': isOpen }"
-    ></i>
+    <bit-icon [name]="isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"></bit-icon>
   </button>
 
   <ng-template
@@ -86,20 +82,19 @@
               }}<span class="sr-only">)</span></span
             >
           </div>
-          <i
-            class="bwi bwi-2x text-muted"
-            [ngClass]="
+          <bit-icon
+            [name]="
               account.value.authenticationStatus === authStatus.Unlocked ? 'bwi-unlock' : 'bwi-lock'
             "
-            aria-hidden="true"
-          ></i>
+            class="bwi-2x text-muted"
+          ></bit-icon>
         </button>
       </div>
       <ng-container *ngIf="view.activeAccount">
         <div class="border" *ngIf="view.numberOfAccounts > 0"></div>
         <ng-container *ngIf="view.numberOfAccounts < 4">
           <button type="button" class="add" (click)="addAccount()">
-            <i class="bwi bwi-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
+            <bit-icon name="bwi-plus"></bit-icon> {{ "addAccount" | i18n }}
           </button>
         </ng-container>
         <ng-container *ngIf="view.numberOfAccounts === 4">

apps/desktop/src/app/layout/search/search.component.html

@@ -7,5 +7,5 @@
     [formControl]="searchText"
     appAutofocus
   />
-  <i class="bwi bwi-search" aria-hidden="true"></i>
+  <bit-icon name="bwi-search"></bit-icon>
 </div>

apps/desktop/src/app/shared/shared.module.ts

@@ -7,6 +7,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { IconModule } from "@bitwarden/components";
 
 import { AvatarComponent } from "../components/avatar.component";
 import { ServicesModule } from "../services/services.module";
@@ -17,6 +18,7 @@ import { ServicesModule } from "../services/services.module";
     A11yModule,
     DragDropModule,
     FormsModule,
+    IconModule,
     JslibModule,
     OverlayModule,
     ReactiveFormsModule,
@@ -30,6 +32,7 @@ import { ServicesModule } from "../services/services.module";
     DatePipe,
     DragDropModule,
     FormsModule,
+    IconModule,
     JslibModule,
     OverlayModule,
     ReactiveFormsModule,

apps/desktop/src/index.html

@@ -13,6 +13,7 @@
   </head>
   <body>
     <app-root>
+      <!-- eslint-disable-next-line @bitwarden/components/no-bwi-class-usage -->
       <div id="loading"><i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i></div>
     </app-root>
   </body>