[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>
2026-02-19 19:04:01 +00:00 · 2026-02-13 15:43:42 +01:00
parent ce0f4aa8d4
commit faea15f110
19 changed files with 66 additions and 75 deletions
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -40,7 +40,7 @@
    class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-text-main"
    [ngClass]="{ 'tw-invisible': !loading() }"
  >
-    <i class="bwi bwi-spinner bwi-lg bwi-spin" [attr.aria-label]="loadingText()"></i>
+    <bit-icon name="bwi-spinner" class="bwi-lg bwi-spin" [ariaLabel]="loadingText()"></bit-icon>
  </span>
 </main>
 <ng-content select="[slot=footer]"></ng-content>
--- a/apps/browser/src/platform/popup/layout/popup-page.component.ts
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.ts
@@ -13,7 +13,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { filter, switchMap, fromEvent, startWith, map } from "rxjs";

 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { ScrollLayoutHostDirective, ScrollLayoutService } from "@bitwarden/components";
+import { IconModule, ScrollLayoutHostDirective, ScrollLayoutService } from "@bitwarden/components";

@Component({
  selector: "popup-page",
@@ -21,7 +21,7 @@ import { ScrollLayoutHostDirective, ScrollLayoutService } from "@bitwarden/compo
  host: {
    class: "tw-h-full tw-flex tw-flex-col tw-overflow-y-hidden",
  },
-  imports: [CommonModule, ScrollLayoutHostDirective],
+  imports: [CommonModule, IconModule, ScrollLayoutHostDirective],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PopupPageComponent {
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/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>
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/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,
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/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">
--- a/apps/desktop/src/app/layout/search/search.component.html
+++ b/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>
--- a/apps/desktop/src/app/shared/shared.module.ts
+++ b/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,
--- a/apps/desktop/src/index.html
+++ b/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>
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@@ -7,11 +7,11 @@
        region == currentRegion ? 'javascript:void(0)' : region.urls.webVault + routeAndParams
      "
    >
-      <i
-        class="bwi bwi-fw bwi-sm bwi-check"
-        aria-hidden="true"
+      <bit-icon
+        name="bwi-check"
+        class="bwi-fw bwi-sm"
        [style.visibility]="region == currentRegion ? 'visible' : 'hidden'"
-      ></i>
+      ></bit-icon>
      {{ region.domain }}
    </a>
  </bit-menu>
@@ -19,7 +19,7 @@
    {{ "accessing" | i18n }}:
    <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
      <b class="tw-text-primary-600 tw-font-medium">{{ currentRegion?.domain }}</b>
-      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+      <bit-icon name="bwi-angle-down" class="bwi-fw bwi-sm"></bit-icon>
    </a>
  </div>
 </div>
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -60,11 +60,11 @@
              <bit-menu-divider></bit-menu-divider>

              <a bitMenuItem routerLink="/settings/account">
-                <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+                <bit-icon name="bwi-user" class="bwi-fw"></bit-icon>
                {{ "accountSettings" | i18n }}
              </a>
              <a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
-                <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
+                <bit-icon name="bwi-question-circle" class="bwi-fw"></bit-icon>
                {{ "getHelp" | i18n }}
              </a>
              <a
@@ -73,18 +73,18 @@
                target="_blank"
                rel="noreferrer"
              >
-                <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
+                <bit-icon name="bwi-download" class="bwi-fw"></bit-icon>
                {{ "getApps" | i18n }}
              </a>

              <bit-menu-divider></bit-menu-divider>

              <button *ngIf="canLock$ | async" bitMenuItem type="button" (click)="lock()">
-                <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
+                <bit-icon name="bwi-lock" class="bwi-fw"></bit-icon>
                {{ "lockNow" | i18n }}
              </button>
              <button bitMenuItem type="button" (click)="logout()">
-                <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+                <bit-icon name="bwi-sign-out" class="bwi-fw"></bit-icon>
                {{ "logOut" | i18n }}
              </button>
            </div>
--- a/apps/web/src/app/layouts/org-switcher/org-switcher.component.html
+++ b/apps/web/src/app/layouts/org-switcher/org-switcher.component.html
@@ -7,13 +7,14 @@
  [routerLinkActiveOptions]="{ exact: true }"
  [(open)]="open"
 >
-  <i
+  <bit-icon
    slot="end"
    *ngIf="!activeOrganization.enabled"
-    class="bwi bwi-exclamation-triangle tw-my-auto"
-    [attr.aria-label]="'organizationIsDisabled' | i18n"
+    name="bwi-exclamation-triangle"
+    class="tw-my-auto"
+    [ariaLabel]="'organizationIsDisabled' | i18n"
    appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
-  ></i>
+  ></bit-icon>
  <ng-container *ngIf="organizations$ | async as organizations">
    <bit-nav-item
      *ngFor="let org of organizations"
@@ -23,13 +24,13 @@
      (mainContentClicked)="toggle()"
      [routerLinkActiveOptions]="{ exact: true }"
    >
-      <i
+      <bit-icon
        slot="end"
        *ngIf="org.enabled == false"
-        class="bwi bwi-exclamation-triangle"
-        [attr.aria-label]="'organizationIsDisabled' | i18n"
+        name="bwi-exclamation-triangle"
+        [ariaLabel]="'organizationIsDisabled' | i18n"
        appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
-      ></i>
+      ></bit-icon>
    </bit-nav-item>
  </ng-container>
  <bit-nav-item
--- a/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html
+++ b/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html
@@ -8,7 +8,7 @@
      rel="noreferrer"
      appA11yTitle="{{ 'learnMoreAboutYourAccountFingerprintPhrase' | i18n }}"
    >
-      <i class="bwi bwi-question-circle" aria-hidden="true"></i
+      <bit-icon name="bwi-question-circle"></bit-icon
    ></a>
    <br />
    <code class="tw-text-code">{{ fingerprint }}</code>
--- a/apps/web/src/app/shared/components/onboarding/onboarding-task.component.html
+++ b/apps/web/src/app/shared/components/onboarding/onboarding-task.component.html
@@ -1,10 +1,14 @@
 <ng-template #content>
-  <i class="bwi bwi-fw !tw-mr-4" [ngClass]="completed ? 'bwi-check tw-text-success' : icon"></i
+  <bit-icon
+    [name]="completed ? 'bwi-check' : icon"
+    class="bwi-fw !tw-mr-4"
+    [ngClass]="completed ? 'tw-text-success' : ''"
+  ></bit-icon
  ><span
    [ngClass]="{
      'tw-text-primary-700 tw-line-through tw-decoration-primary-700 tw-opacity-50': completed,
    }"
-    >{{ title }}<i class="bwi bwi-angle-right tw-ml-1"></i
+    >{{ title }}<bit-icon name="bwi-angle-right" class="tw-ml-1"></bit-icon
  ></span>
 </ng-template>

--- a/apps/web/src/app/shared/components/onboarding/onboarding-task.component.ts
+++ b/apps/web/src/app/shared/components/onboarding/onboarding-task.component.ts
@@ -2,6 +2,8 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";

+import { BitwardenIcon } from "@bitwarden/components";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
@@ -21,7 +23,7 @@ export class OnboardingTaskComponent {
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input()
-  icon = "bwi-info-circle";
+  icon: BitwardenIcon = "bwi-info-circle";

  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
  // eslint-disable-next-line @angular-eslint/prefer-signals
--- a/apps/web/src/app/shared/components/onboarding/onboarding.component.html
+++ b/apps/web/src/app/shared/components/onboarding/onboarding.component.html
@@ -6,11 +6,7 @@
      <span *ngIf="tasks.length > 0; else spinner">
        {{ "complete" | i18n: amountCompleted : tasks.length }}
      </span>
-      <i
-        class="bwi tw-my-auto"
-        [ngClass]="open ? 'bwi-angle-down' : 'bwi-angle-up'"
-        aria-hidden="true"
-      ></i>
+      <bit-icon [name]="open ? 'bwi-angle-down' : 'bwi-angle-up'" class="tw-my-auto"></bit-icon>
    </div>
  </summary>
  <ul class="tw-mb-0 tw-ml-6 tw-flex tw-flex-col tw-gap-4">
@@ -24,5 +20,5 @@
 </details>

 <ng-template #spinner>
-  <i class="bwi bwi-spinner bwi-spin"></i>
+  <bit-icon name="bwi-spinner" class="bwi-spin"></bit-icon>
 </ng-template>
--- a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
+++ b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
@@ -4,7 +4,7 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 import { delay, of, startWith } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { LinkModule, SvgModule, ProgressModule } from "@bitwarden/components";
+import { LinkModule, SvgModule, ProgressModule, IconModule } from "@bitwarden/components";

 import { PreloadedEnglishI18nModule } from "../../../core/tests";

@@ -16,7 +16,7 @@ export default {
  component: OnboardingComponent,
  decorators: [
    moduleMetadata({
-      imports: [JslibModule, RouterModule, LinkModule, SvgModule, ProgressModule],
+      imports: [JslibModule, RouterModule, LinkModule, IconModule, SvgModule, ProgressModule],
      declarations: [OnboardingTaskComponent],
    }),
    applicationConfig({
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -18,6 +18,7 @@ import {
  DialogModule,
  FormFieldModule,
  IconButtonModule,
+  IconModule,
  SvgModule,
  LinkModule,
  MenuModule,
@@ -63,6 +64,7 @@ import {
    DialogModule,
    FormFieldModule,
    IconButtonModule,
+    IconModule,
    SvgModule,
    LinkModule,
    MenuModule,
@@ -99,6 +101,7 @@ import {
    DialogModule,
    FormFieldModule,
    IconButtonModule,
+    IconModule,
    SvgModule,
    LinkModule,
    MenuModule,
--- a/apps/web/src/connectors/platform/proxy-cookie-redirect.html
+++ b/apps/web/src/connectors/platform/proxy-cookie-redirect.html
@@ -18,6 +18,7 @@
    <div class="tw-p-8 tw-flex">
      <img class="new-logo-themed" alt="Bitwarden" />
      <div class="spinner-container tw-justify-center">
+        <!-- eslint-disable-next-line @bitwarden/components/no-bwi-class-usage -->
        <i
          class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
          title="Loading"
--- a/apps/web/src/index.html
+++ b/apps/web/src/index.html
@@ -21,6 +21,7 @@
          <img class="new-logo-themed !tw-w-[200px]" alt="Bitwarden" />
        </div>
        <div class="spinner-container tw-justify-center">
+          <!-- eslint-disable-next-line @bitwarden/components/no-bwi-class-usage -->
          <i
            class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
            title="Loading"