[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-18 10:23:52 +00:00 · 2026-02-13 15:43:42 +01:00
parent 412d1b541d
commit 69264c8841
19 changed files with 66 additions and 75 deletions
--- 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"