refactor(Auth-Font-Icons): [Auth/PM-31804] Migrate auth font icons to use bit-icon (#18816)

* PM-31804 - WIP * PM-31804 - Profile Component - fix missing translation * PM-31804 - Web - Emergency Access Takeover Dialog Comp - remove screen reader only span as arialabel on spinner should be sufficient * PM-31804 - Web - EmergencyAccessViewComp - remove redundant span as aria label handles accessibility. * PM-31804 - Web - EmergencyAccessViewComp - Remove redundant sr only span - replaced w/ aria label * PM-31804 - Web - EmergencyAccessViewComp - Remove redundant sr only span - replaced w/ aria label * PM-31804 - EmergencyAccessComp - Replace redundant sr only span with aria label * PM-31804 - two-factor-setup.component.html - Replace redundant sr only spans with aria labels * PM-31804 - WebauthnLoginSettingsModule - remove unnecessary IconModule - it's imported via SharedModule * PM-31804 - web - emergency-access.component.html - Replace redundant sr only span with aria label * PM-31804 - LoginDecryptionOptionsComponent - Replace redundant sr only span with aria label * PM-31804 - ChangePasswordComp - Replace redundant sr only span with aria label * PM-31804 - AccountComponent - add BitwardenIcon type to satisfy template type requirements for name property. * PM-31804 - Browser Account Security Component - replace nonexistent chevron icon with existing angle right icon. * PM-31804 - Fix A11y issues with missing aria labels * PM-31804 - Remove remaining redundant sr only spans since we now have aria labels
2026-02-24 16:43:27 +00:00 · 2026-02-23 10:42:02 -05:00
parent 75b0112ce1
commit 3782e328e1
60 changed files with 238 additions and 176 deletions
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
@@ -58,19 +58,19 @@
          [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
          [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
        >
-          <i slot="start" class="bwi bwi-lock tw-text-lg tw-text-main" aria-hidden="true"></i>
+          <bit-icon slot="start" name="bwi-lock" class="tw-text-lg tw-text-main"></bit-icon>
          {{ "lockNow" | i18n }}
        </button>
      </bit-item>
      <bit-item>
        <button type="button" bit-item-content (click)="logOut(currentAccount.id)">
-          <i slot="start" class="bwi bwi-sign-out tw-text-lg tw-text-main" aria-hidden="true"></i>
+          <bit-icon slot="start" name="bwi-sign-out" class="tw-text-lg tw-text-main"></bit-icon>
          {{ "logOut" | i18n }}
        </button>
      </bit-item>
      <bit-item *ngIf="showLockAll$ | async">
        <button type="button" bit-item-content (click)="lockAll()">
-          <i slot="start" class="bwi bwi-lock tw-text-lg tw-text-main" aria-hidden="true"></i>
+          <bit-icon slot="start" name="bwi-lock" class="tw-text-lg tw-text-main"></bit-icon>
          {{ "lockAll" | i18n }}
        </button>
      </bit-item>
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts
+++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts
@@ -18,6 +18,7 @@ import {
  AvatarModule,
  ButtonModule,
  DialogService,
+  IconModule,
  ItemModule,
  SectionComponent,
  SectionHeaderComponent,
@@ -42,6 +43,7 @@ import { AccountSwitcherService } from "./services/account-switcher.service";
    ButtonModule,
    ItemModule,
    AvatarModule,
+    IconModule,
    PopupPageComponent,
    PopupHeaderComponent,
    PopOutComponent,
--- a/apps/browser/src/auth/popup/account-switching/account.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account.component.html
@@ -32,13 +32,13 @@
      </div>
    </ng-container>

-    <i slot="end" class="bwi tw-text-lg" [ngClass]="status.icon" aria-hidden="true"></i>
+    <bit-icon slot="end" [name]="status.icon" class="tw-text-lg"></bit-icon>
  </button>
 </bit-item>

 <bit-item *ngIf="account.id === specialAccountAddId">
  <button type="button" bit-item-content (click)="selectAccount(account.id)">
-    <i slot="start" class="bwi bwi-plus tw-text-lg tw-text-main" aria-hidden="true"></i>
+    <bit-icon slot="start" name="bwi-plus" class="tw-text-lg tw-text-main"></bit-icon>
    {{ account.name | i18n }}
  </button>
 </bit-item>
--- a/apps/browser/src/auth/popup/account-switching/account.component.ts
+++ b/apps/browser/src/auth/popup/account-switching/account.component.ts
@@ -8,7 +8,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { AvatarModule, ItemModule } from "@bitwarden/components";
+import { AvatarModule, IconModule, ItemModule, type BitwardenIcon } from "@bitwarden/components";
 import { BiometricsService } from "@bitwarden/key-management";

 import { AccountSwitcherService, AvailableAccount } from "./services/account-switcher.service";
@@ -18,7 +18,7 @@ import { AccountSwitcherService, AvailableAccount } from "./services/account-swi
@Component({
  selector: "auth-account",
  templateUrl: "account.component.html",
-  imports: [CommonModule, JslibModule, AvatarModule, ItemModule],
+  imports: [CommonModule, JslibModule, AvatarModule, IconModule, ItemModule],
 })
 export class AccountComponent {
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
@@ -60,7 +60,7 @@ export class AccountComponent {
    this.loading.emit(false);
  }

-  get status() {
+  get status(): { text: string; icon: BitwardenIcon } {
    if (this.account.isActive) {
      return { text: this.i18nService.t("active"), icon: "bwi-check-circle" };
    }
--- a/apps/browser/src/auth/popup/settings/account-security.component.html
+++ b/apps/browser/src/auth/popup/settings/account-security.component.html
@@ -123,7 +123,7 @@
      <bit-item>
        <button bit-item-content type="button" appStopClick routerLink="/device-management">
          {{ "devices" | i18n }}
-          <i slot="end" class="bwi bwi-chevron-right" aria-hidden="true"></i>
+          <bit-icon slot="end" name="bwi-angle-right" class="tw-text-lg"></bit-icon>
        </button>
      </bit-item>
    </bit-section>
@@ -154,13 +154,13 @@
      <bit-item>
        <button bit-item-content type="button" appStopClick (click)="twoStep()">
          {{ "twoStepLogin" | i18n }}
-          <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+          <bit-icon slot="end" name="bwi-external-link"></bit-icon>
        </button>
      </bit-item>
      <bit-item *ngIf="showChangeMasterPass">
        <button bit-item-content type="button" appStopClick (click)="changePassword()">
          {{ "changeMasterPassword" | i18n }}
-          <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+          <bit-icon slot="end" name="bwi-external-link"></bit-icon>
        </button>
      </bit-item>
    </bit-section>
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -56,6 +56,7 @@ import {
  DialogService,
  FormFieldModule,
  IconButtonModule,
+  IconModule,
  ItemModule,
  LinkModule,
  SectionComponent,
@@ -98,6 +99,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
    FormsModule,
    ReactiveFormsModule,
    IconButtonModule,
+    IconModule,
    ItemModule,
    JslibModule,
    LinkModule,
--- a/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
+++ b/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
@@ -1,12 +1,11 @@
 <div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
  <div>
    <p class="tw-text-center">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      <bit-icon
+        name="bwi-spinner"
+        class="bwi-spin bwi-2x tw-text-muted"
+        [ariaLabel]="'loading' | i18n"
+      ></bit-icon>
    </p>
  </div>
 </div>
--- a/apps/web/src/app/auth/organization-invite/accept-organization.component.html
+++ b/apps/web/src/app/auth/organization-invite/accept-organization.component.html
@@ -2,12 +2,11 @@
  <div>
    <img src="../../images/logo-dark@2x.png" class="logo" alt="Bitwarden" />
    <p class="tw-text-center tw-my-4">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      <bit-icon
+        name="bwi-spinner"
+        class="bwi-spin bwi-2x tw-text-muted"
+        [ariaLabel]="'loading' | i18n"
+      ></bit-icon>
    </p>
  </div>
 </div>
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
@@ -1,7 +1,7 @@
 <bit-dialog dialogSize="large" [title]="'customizeAvatar' | i18n">
  <ng-container bitDialogContent>
    <div class="tw-text-center" *ngIf="loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
      {{ "loading" | i18n }}
    </div>
    <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
@@ -31,10 +31,11 @@
          class="tw-relative tw-flex tw-size-24 tw-cursor-pointer tw-place-content-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-600 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-600"
          [style.background-color]="customColor$ | async"
        >
-          <i
+          <bit-icon
+            name="bwi-pencil"
            [style.color]="customTextColor$ | async"
-            class="bwi bwi-pencil !tw-text-muted tw-m-auto tw-text-3xl"
-          ></i>
+            class="!tw-text-muted tw-m-auto tw-text-3xl"
+          ></bit-icon>
          <input
            tabindex="-1"
            class="tw-absolute tw-bottom-0 tw-right-0 tw-size-px tw-border-none tw-bg-transparent tw-opacity-0"
--- a/apps/web/src/app/auth/settings/account/profile.component.html
+++ b/apps/web/src/app/auth/settings/account/profile.component.html
@@ -1,10 +1,9 @@
 <div *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <bit-icon
+    name="bwi-spinner"
+    class="bwi-spin tw-text-muted"
+    [ariaLabel]="'loading' | i18n"
+  ></bit-icon>
 </div>
 <form *ngIf="profile && !loading" [formGroup]="formGroup" [bitSubmit]="submit">
  <div class="tw-grid tw-grid-cols-12 tw-gap-6">
@@ -32,8 +31,8 @@
          appStopProp
          [bitAction]="openChangeAvatar"
        >
-          <i class="bwi bwi-lg bwi-pencil-square" aria-hidden="true"></i>
-          Customize
+          <bit-icon name="bwi-pencil-square" class="bwi-lg"></bit-icon>
+          {{ "customize" | i18n }}
        </button>
      </div>
      <div *ngIf="managingOrganization$ | async as managingOrganization">
@@ -43,7 +42,7 @@
          rel="noopener noreferrer"
          href="https://bitwarden.com/help/claimed-accounts"
        >
-          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+          <bit-icon name="bwi-question-circle"></bit-icon>
        </a>
      </div>
      @if (fingerprintMaterial && userPublicKey) {
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
@@ -25,7 +25,7 @@
            href="https://bitwarden.com/help/emergency-access/#user-access"
            slot="end"
          >
-            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+            <bit-icon name="bwi-question-circle"></bit-icon>
          </a>
        </bit-label>
        <bit-radio-button id="emergencyTypeView" [value]="emergencyAccessType.View">
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
@@ -30,7 +30,7 @@
          [bitAction]="invite"
          [disabled]="!(canAccessPremium$ | async)"
        >
-          <i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
+          <bit-icon name="bwi-plus" class="bwi-fw"></bit-icon>
          {{ "addEmergencyContact" | i18n }}
        </button>
      </div>
@@ -100,7 +100,7 @@
                *ngIf="c.status === emergencyAccessStatusType.Invited"
                (click)="reinvite(c)"
              >
-                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                <bit-icon name="bwi-envelope" class="bwi-fw"></bit-icon>
                {{ "resendInvitation" | i18n }}
              </button>
              <button
@@ -109,7 +109,7 @@
                *ngIf="c.status === emergencyAccessStatusType.Accepted"
                (click)="confirm(c)"
              >
-                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                <bit-icon name="bwi-check" class="bwi-fw"></bit-icon>
                {{ "confirm" | i18n }}
              </button>
              <button
@@ -118,7 +118,7 @@
                *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
                (click)="approve(c)"
              >
-                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                <bit-icon name="bwi-check" class="bwi-fw"></bit-icon>
                {{ "approve" | i18n }}
              </button>
              <button
@@ -130,11 +130,11 @@
                "
                (click)="reject(c)"
              >
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                <bit-icon name="bwi-close" class="bwi-fw"></bit-icon>
                {{ "reject" | i18n }}
              </button>
              <button type="button" bitMenuItem (click)="remove(c)">
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                <bit-icon name="bwi-close" class="bwi-fw"></bit-icon>
                {{ "remove" | i18n }}
              </button>
            </bit-menu>
@@ -145,12 +145,11 @@
    <ng-container *ngIf="!trustedContacts || !trustedContacts.length">
      <p bitTypography="body1" class="tw-mt-2" *ngIf="loaded">{{ "noTrustedContacts" | i18n }}</p>
      <ng-container *ngIf="!loaded">
-        <i
-          class="bwi bwi-spinner bwi-spin tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </ng-container>
    </ng-container>
  </bit-section>
@@ -223,7 +222,7 @@
                *ngIf="c.status === emergencyAccessStatusType.Confirmed"
                (click)="requestAccess(c)"
              >
-                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                <bit-icon name="bwi-envelope" class="bwi-fw"></bit-icon>
                {{ "requestAccess" | i18n }}
              </button>
              <button
@@ -235,7 +234,7 @@
                "
                (click)="takeover(c)"
              >
-                <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+                <bit-icon name="bwi-key" class="bwi-fw"></bit-icon>
                {{ "takeover" | i18n }}
              </button>
              <button
@@ -247,11 +246,11 @@
                "
                [routerLink]="c.id"
              >
-                <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
+                <bit-icon name="bwi-eye" class="bwi-fw"></bit-icon>
                {{ "view" | i18n }}
              </button>
              <button type="button" bitMenuItem (click)="remove(c)">
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                <bit-icon name="bwi-close" class="bwi-fw"></bit-icon>
                {{ "remove" | i18n }}
              </button>
            </bit-menu>
@@ -262,12 +261,11 @@
    <ng-container *ngIf="!grantedContacts || !grantedContacts.length">
      <p bitTypography="body1" *ngIf="loaded">{{ "noGrantedAccess" | i18n }}</p>
      <ng-container *ngIf="!loaded">
-        <i
-          class="bwi bwi-spinner bwi-spin tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </ng-container>
    </ng-container>
  </bit-section>
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
@@ -7,12 +7,11 @@
  <div bitDialogContent>
    @if (initializing) {
      <div class="tw-flex tw-items-center tw-justify-center">
-        <i
-          class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin bwi-2x tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </div>
    } @else {
      <!-- TODO: PM-22237 -->
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
@@ -21,6 +21,7 @@ import {
  DialogModule,
  DialogRef,
  DialogService,
+  IconModule,
  ToastService,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
@@ -59,6 +60,7 @@ export type EmergencyAccessTakeoverDialogResultType =
    CommonModule,
    DialogModule,
    I18nPipe,
+    IconModule,
    InputPasswordComponent,
  ],
 })
--- a/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
@@ -18,22 +18,20 @@
              >{{ currentCipher.name }}</a
            >
            <ng-container *ngIf="currentCipher.organizationId">
-              <i
-                class="bwi bwi-collection-shared tw-ml-1"
+              <bit-icon
+                name="bwi-collection-shared"
+                class="tw-ml-1"
                appStopProp
-                title="{{ 'shared' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+                [ariaLabel]="'shared' | i18n"
+              ></bit-icon>
            </ng-container>
            <ng-container *ngIf="currentCipher.hasAttachments">
-              <i
-                class="bwi bwi-paperclip tw-ml-1"
+              <bit-icon
+                name="bwi-paperclip"
+                class="tw-ml-1"
                appStopProp
-                title="{{ 'attachments' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+                [ariaLabel]="'attachments' | i18n"
+              ></bit-icon>
            </ng-container>
            <br />
            <small class="tw-text-xs">{{ currentCipher.subTitle }}</small>
@@ -43,11 +41,10 @@
    </bit-table>
  </ng-container>
  <ng-container *ngIf="!loaded">
-    <i
-      class="bwi bwi-spinner bwi-spin tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
  </ng-container>
 </div>
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
@@ -73,7 +73,7 @@
      <hr *ngIf="enabled" />
      <p class="tw-text-center tw-mb-0">
        <ng-container *ngIf="qrScriptError" class="tw-mt-2">
-          <i class="bwi bwi-error tw-text-3xl tw-text-danger" aria-hidden="true"></i>
+          <bit-icon name="bwi-error" class="tw-text-3xl tw-text-danger"></bit-icon>
          <p>
            {{ "twoStepAuthenticatorQRCanvasError" | i18n }}
          </p>
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts
@@ -29,6 +29,7 @@ import {
  DialogRef,
  DialogService,
  FormFieldModule,
+  IconModule,
  SvgModule,
  InputModule,
  LinkModule,
@@ -63,6 +64,7 @@ declare global {
    ReactiveFormsModule,
    DialogModule,
    FormFieldModule,
+    IconModule,
    InputModule,
    LinkModule,
    TypographyModule,
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
@@ -17,7 +17,7 @@
      <ul class="bwi-ul">
        <li *ngFor="let k of keys; let i = index" #removeKeyBtn [appApiAction]="k.removePromise">
          <ng-container *ngIf="k.configured">
-            <i class="bwi bwi-li bwi-key"></i>
+            <bit-icon name="bwi-key" class="bwi-li"></bit-icon>
            <span *ngIf="k.configured" bitTypography="body1" class="tw-font-medium">
              {{ k.name || ("unnamedKey" | i18n) }}
            </span>
@@ -27,12 +27,12 @@
              </ng-container>
            </ng-container>
            <ng-container *ngIf="keysConfiguredCount > 1 && k.configured">
-              <i
-                class="bwi bwi-spin bwi-spinner tw-text-muted bwi-fw"
-                title="{{ 'loading' | i18n }}"
+              <bit-icon
+                name="bwi-spinner"
+                class="bwi-spin tw-text-muted bwi-fw"
+                [ariaLabel]="'loading' | i18n"
                *ngIf="$any(removeKeyBtn).loading"
-                aria-hidden="true"
-              ></i>
+              ></bit-icon>
              -
              <a bitLink href="#" appStopClick (click)="remove(k)">{{ "remove" | i18n }}</a>
            </ng-container>
@@ -68,19 +68,27 @@
        {{ "readKey" | i18n }}
      </button>
      <ng-container *ngIf="$any(readKeyBtn).loading()">
-        <i class="bwi bwi-spinner bwi-spin tw-text-muted" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </ng-container>
      <ng-container *ngIf="!$any(readKeyBtn).loading()">
        <ng-container *ngIf="webAuthnListening">
-          <i class="bwi bwi-spinner bwi-spin tw-text-muted" aria-hidden="true"></i>
+          <bit-icon
+            name="bwi-spinner"
+            class="bwi-spin tw-text-muted"
+            [ariaLabel]="'loading' | i18n"
+          ></bit-icon>
          {{ "twoFactorU2fWaiting" | i18n }}...
        </ng-container>
        <ng-container *ngIf="webAuthnResponse">
-          <i class="bwi bwi-check-circle tw-text-success" aria-hidden="true"></i>
+          <bit-icon name="bwi-check-circle" class="tw-text-success"></bit-icon>
          {{ "twoFactorU2fClickSave" | i18n }}
        </ng-container>
        <ng-container *ngIf="webAuthnError">
-          <i class="bwi bwi-exclamation-triangle tw-text-danger" aria-hidden="true"></i>
+          <bit-icon name="bwi-exclamation-triangle" class="tw-text-danger"></bit-icon>
          {{ "twoFactorU2fProblemReadingTryAgain" | i18n }}
        </ng-container>
      </ng-container>
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts
@@ -27,6 +27,7 @@ import {
  DialogRef,
  DialogService,
  FormFieldModule,
+  IconModule,
  LinkModule,
  ToastService,
  TypographyModule,
@@ -56,6 +57,7 @@ interface Key {
    DialogModule,
    FormFieldModule,
    I18nPipe,
+    IconModule,
    JslibModule,
    LinkModule,
    ReactiveFormsModule,
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.html
@@ -34,12 +34,11 @@
  <h2 [ngClass]="{ 'mt-5': !organizationId }">
    {{ "providers" | i18n }}
    <small *ngIf="loading">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-fw tw-text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      <bit-icon
+        name="bwi-spinner"
+        class="bwi-spin bwi-fw tw-text-muted"
+        [ariaLabel]="'loading' | i18n"
+      ></bit-icon>
    </small>
  </h2>
  <bit-callout type="warning" *ngIf="showPolicyWarning">
@@ -59,12 +58,11 @@
            {{ p.name }}
          </div>
          <ng-container *ngIf="p.enabled">
-            <i
-              class="bwi bwi-check tw-text-success-600 bwi-fw tw-ml-2"
-              title="{{ 'enabled' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "enabled" | i18n }}</span>
+            <bit-icon
+              name="bwi-check"
+              class="tw-text-success-600 bwi-fw tw-ml-2"
+              [ariaLabel]="'enabled' | i18n"
+            ></bit-icon>
          </ng-container>
          <app-premium-badge class="tw-ml-2" *ngIf="p.premium"></app-premium-badge>
        </h3>
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.html
@@ -8,7 +8,11 @@
    </span>
    <ng-container bitDialogContent>
      <ng-container *ngIf="!credential">
-        <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-ml-1"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </ng-container>

      <ng-container *ngIf="credential">
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/enable-encryption-dialog/enable-encryption-dialog.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/enable-encryption-dialog/enable-encryption-dialog.component.html
@@ -8,7 +8,11 @@
    </span>
    <ng-container bitDialogContent>
      <ng-container *ngIf="!credential">
-        <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-ml-1"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </ng-container>

      <ng-container *ngIf="credential">
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
@@ -21,7 +21,7 @@
    </ng-container>
  </span>
  <ng-container *ngIf="loading">
-    <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin tw-ml-1" [ariaLabel]="'loading' | i18n"></bit-icon>
  </ng-container>
 </h2>
 <p bitTypography="body1">
@@ -36,7 +36,7 @@
    <td class="tw-p-2 tw-pl-0 tw-font-medium">{{ credential.name }}</td>
    <td class="tw-p-2 tw-pr-10 tw-text-left">
      <ng-container *ngIf="credential.prfStatus === WebauthnLoginCredentialPrfStatus.Enabled">
-        <i class="bwi bwi-lock-encrypted"></i>
+        <bit-icon name="bwi-lock-encrypted"></bit-icon>
        <span bitTypography="body1" class="tw-text-muted">{{ "usedForEncryption" | i18n }}</span>
      </ng-container>
      <ng-container *ngIf="credential.prfStatus === WebauthnLoginCredentialPrfStatus.Supported">
@@ -47,7 +47,7 @@
          [attr.aria-label]="('enablePasskeyEncryption' | i18n) + ' ' + credential.name"
          (click)="enableEncryption(credential.id)"
        >
-          <i class="bwi bwi-lock-encrypted"></i>
+          <bit-icon name="bwi-lock-encrypted"></bit-icon>
          {{ "enablePasskeyEncryption" | i18n }}
        </button>
      </ng-container>
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
@@ -21,7 +21,7 @@
      {{ "sendCode" | i18n }}
    </button>
    <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
-      <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+      <bit-icon name="bwi-check-circle"></bit-icon>
      {{ "codeSent" | i18n }}
    </span>
  </div>
--- a/apps/web/src/app/auth/verify-email-token.component.html
+++ b/apps/web/src/app/auth/verify-email-token.component.html
@@ -1,6 +1,10 @@
 <div class="tw-p-8 tw-flex">
  <img class="new-logo-themed" alt="Bitwarden" />
  <div class="spinner-container tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted" title="Loading" aria-hidden="true"></i>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin bwi-3x tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
  </div>
 </div>
--- a/apps/web/src/app/auth/verify-email-token.component.ts
+++ b/apps/web/src/app/auth/verify-email-token.component.ts
@@ -12,11 +12,14 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ToastService } from "@bitwarden/components";

+import { SharedModule } from "../shared/shared.module";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-verify-email-token",
  templateUrl: "verify-email-token.component.html",
+  imports: [SharedModule],
 })
 export class VerifyEmailTokenComponent implements OnInit {
  constructor(
--- a/libs/angular/src/auth/device-management/device-management-table.component.html
+++ b/libs/angular/src/auth/device-management/device-management-table.component.html
@@ -18,7 +18,7 @@
    <!-- Column: Device Name -->
    <td bitCell class="tw-flex tw-gap-2 tw-items-center tw-h-16">
      <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
-        <i [class]="device.icon" class="bwi-lg" aria-hidden="true"></i>
+        <bit-icon [name]="device.icon" class="bwi-lg"></bit-icon>
      </div>

      <div>
--- a/libs/angular/src/auth/device-management/device-management-table.component.ts
+++ b/libs/angular/src/auth/device-management/device-management-table.component.ts
@@ -7,6 +7,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import {
  BadgeModule,
  ButtonModule,
+  IconModule,
  LinkModule,
  TableDataSource,
  TableModule,
@@ -21,7 +22,15 @@ import { DeviceDisplayData } from "./device-management.component";
  standalone: true,
  selector: "auth-device-management-table",
  templateUrl: "./device-management-table.component.html",
-  imports: [BadgeModule, ButtonModule, CommonModule, JslibModule, LinkModule, TableModule],
+  imports: [
+    BadgeModule,
+    ButtonModule,
+    CommonModule,
+    IconModule,
+    JslibModule,
+    LinkModule,
+    TableModule,
+  ],
 })
 export class DeviceManagementTableComponent implements OnChanges {
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
--- a/libs/angular/src/auth/device-management/device-management.component.html
+++ b/libs/angular/src/auth/device-management/device-management.component.html
@@ -8,7 +8,7 @@
      [bitPopoverTriggerFor]="infoPopover"
      position="right-start"
    >
-      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      <bit-icon name="bwi-question-circle"></bit-icon>
    </button>

    <bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
@@ -23,7 +23,11 @@

@if (initializing) {
  <div class="tw-flex tw-justify-center tw-items-center tw-p-4">
-    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin tw-text-2xl"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
  </div>
 } @else {
  <!-- Table View: displays on medium to large screens -->
--- a/libs/angular/src/auth/device-management/device-management.component.ts
+++ b/libs/angular/src/auth/device-management/device-management.component.ts
@@ -19,7 +19,7 @@ import { DeviceType, DeviceTypeMetadata } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
-import { ButtonModule, DialogService, PopoverModule } from "@bitwarden/components";
+import { ButtonModule, DialogService, IconModule, PopoverModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";

 import { LoginApprovalDialogComponent } from "../login-approval";
@@ -62,6 +62,7 @@ export interface DeviceDisplayData {
    DeviceManagementItemGroupComponent,
    DeviceManagementTableComponent,
    I18nPipe,
+    IconModule,
    PopoverModule,
  ],
 })
--- a/libs/angular/src/auth/environment-selector/environment-selector.component.html
+++ b/libs/angular/src/auth/environment-selector/environment-selector.component.html
@@ -12,12 +12,12 @@
        [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
        (click)="toggle(region.key)"
      >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
+        <bit-icon
+          name="bwi-check"
+          class="bwi-fw bwi-sm"
          style="padding-bottom: 1px"
-          aria-hidden="true"
          [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
-        ></i>
+        ></bit-icon>
        <span>{{ region.domain }}</span>
      </button>
      <button
@@ -26,12 +26,12 @@
        [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
        (click)="toggle(ServerEnvironmentType.SelfHosted)"
      >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
+        <bit-icon
+          name="bwi-check"
+          class="bwi-fw bwi-sm"
          style="padding-bottom: 1px"
-          aria-hidden="true"
          [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
-        ></i>
+        ></bit-icon>
        <span>{{ "selfHostedServer" | i18n }}</span>
      </button>
    </bit-menu>
@@ -41,7 +41,7 @@
        <b class="tw-text-primary-600 tw-font-medium">{{
          data.selectedRegion?.domain || ("selfHostedServer" | i18n)
        }}</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>
      </button>
    </div>
  </div>
--- a/libs/angular/src/auth/environment-selector/environment-selector.component.ts
+++ b/libs/angular/src/auth/environment-selector/environment-selector.component.ts
@@ -13,6 +13,7 @@ import {
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
  DialogService,
+  IconModule,
  LinkModule,
  MenuModule,
  ToastService,
@@ -26,7 +27,7 @@ import { I18nPipe } from "@bitwarden/ui-common";
  selector: "environment-selector",
  templateUrl: "environment-selector.component.html",
  standalone: true,
-  imports: [CommonModule, I18nPipe, MenuModule, LinkModule, TypographyModule],
+  imports: [CommonModule, I18nPipe, IconModule, LinkModule, MenuModule, TypographyModule],
 })
 export class EnvironmentSelectorComponent implements OnDestroy {
  protected ServerEnvironmentType = Region;
--- a/libs/angular/src/auth/login-approval/login-approval-dialog.component.html
+++ b/libs/angular/src/auth/login-approval/login-approval-dialog.component.html
@@ -4,7 +4,11 @@
  <ng-container bitDialogContent>
    <ng-container *ngIf="loading">
      <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
-        <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin bwi-3x"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
      </div>
    </ng-container>

--- a/libs/angular/src/auth/login-approval/login-approval-dialog.component.ts
+++ b/libs/angular/src/auth/login-approval/login-approval-dialog.component.ts
@@ -20,6 +20,7 @@ import {
  ButtonModule,
  DialogModule,
  DialogService,
+  IconModule,
  ToastService,
 } from "@bitwarden/components";
 import { LogService } from "@bitwarden/logging";
@@ -35,7 +36,7 @@ export interface LoginApprovalDialogParams {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "login-approval-dialog.component.html",
-  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, JslibModule],
+  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, IconModule, JslibModule],
 })
 export class LoginApprovalDialogComponent implements OnInit, OnDestroy {
  authRequestId: string;
--- a/libs/angular/src/auth/password-management/change-password/change-password.component.html
+++ b/libs/angular/src/auth/password-management/change-password/change-password.component.html
@@ -1,10 +1,9 @@
@if (initializing) {
-  <i
-    class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <bit-icon
+    name="bwi-spinner"
+    class="bwi-spin bwi-2x tw-text-muted"
+    [ariaLabel]="'loading' | i18n"
+  ></bit-icon>
 } @else {
  <bit-callout
    *ngIf="this.forceSetPasswordReason !== ForceSetPasswordReason.AdminForcePasswordReset"
--- a/libs/angular/src/auth/password-management/change-password/change-password.component.ts
+++ b/libs/angular/src/auth/password-management/change-password/change-password.component.ts
@@ -23,9 +23,10 @@ import { SyncService } from "@bitwarden/common/platform/sync";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
  AnonLayoutWrapperDataService,
-  DialogService,
-  ToastService,
  CalloutComponent,
+  DialogService,
+  IconModule,
+  ToastService,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";

@@ -44,7 +45,7 @@ import { ChangePasswordService } from "./change-password.service.abstraction";
@Component({
  selector: "auth-change-password",
  templateUrl: "change-password.component.html",
-  imports: [InputPasswordComponent, I18nPipe, CalloutComponent, CommonModule],
+  imports: [CalloutComponent, CommonModule, IconModule, InputPasswordComponent, I18nPipe],
 })
 export class ChangePasswordComponent implements OnInit {
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
--- a/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html
+++ b/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html
@@ -1,10 +1,6 @@
@if (initializing) {
  <div class="tw-flex tw-items-center tw-justify-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-3x"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
  </div>
 } @else {
  @if (userType === SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER_UNTRUSTED_DEVICE) {
--- a/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts
+++ b/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts
@@ -37,6 +37,7 @@ import {
  ButtonModule,
  CalloutComponent,
  DialogService,
+  IconModule,
  ToastService,
 } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
@@ -56,7 +57,14 @@ import {
@Component({
  standalone: true,
  templateUrl: "set-initial-password.component.html",
-  imports: [ButtonModule, CalloutComponent, CommonModule, InputPasswordComponent, I18nPipe],
+  imports: [
+    ButtonModule,
+    CalloutComponent,
+    CommonModule,
+    IconModule,
+    InputPasswordComponent,
+    I18nPipe,
+  ],
 })
 export class SetInitialPasswordComponent implements OnInit {
  protected inputPasswordFlow = InputPasswordFlow.SetInitialPasswordAuthedUser;
--- a/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html
+++ b/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html
@@ -1,5 +1,5 @@
 <bit-simple-dialog>
-  <i bitDialogIcon class="bwi bwi-info-circle tw-text-info tw-text-3xl" aria-hidden="true"></i>
+  <bit-icon bitDialogIcon name="bwi-info-circle" class="tw-text-info tw-text-3xl"></bit-icon>
  <span bitDialogTitle
    ><strong>{{ "yourAccountsFingerprint" | i18n }}:</strong></span
  >
@@ -16,7 +16,7 @@
      bitDialogClose
    >
      {{ "learnMore" | i18n }}
-      <i class="bwi bwi-external-link bwi-fw" aria-hidden="true"></i>
+      <bit-icon name="bwi-external-link" class="bwi-fw"></bit-icon>
    </a>
    <button bitButton type="button" buttonType="secondary" bitDialogClose>
      {{ "close" | i18n }}
--- a/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts
+++ b/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts
@@ -9,6 +9,7 @@ import {
  DialogModule,
  DialogService,
  CenterPositionStrategy,
+  IconModule,
 } from "@bitwarden/components";

 export type FingerprintDialogData = {
@@ -19,7 +20,7 @@ export type FingerprintDialogData = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "fingerprint-dialog.component.html",
-  imports: [JslibModule, ButtonModule, DialogModule],
+  imports: [JslibModule, ButtonModule, DialogModule, IconModule],
 })
 export class FingerprintDialogComponent {
  constructor(@Inject(DIALOG_DATA) protected data: FingerprintDialogData) {}
--- a/libs/auth/src/angular/input-password/input-password.component.html
+++ b/libs/auth/src/angular/input-password/input-password.component.html
@@ -149,7 +149,7 @@
        rel="noreferrer"
        appA11yTitle="{{ 'impactOfRotatingYourEncryptionKey' | i18n }}"
      >
-        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+        <bit-icon name="bwi-question-circle"></bit-icon>
      </a>
    </bit-label>
  </bit-form-control>
--- a/libs/auth/src/angular/input-password/input-password.component.ts
+++ b/libs/auth/src/angular/input-password/input-password.component.ts
@@ -29,6 +29,7 @@ import {
  DialogService,
  FormFieldModule,
  IconButtonModule,
+  IconModule,
  InputModule,
  LinkModule,
  ToastService,
@@ -112,6 +113,7 @@ interface InputPasswordForm {
    CheckboxModule,
    FormFieldModule,
    IconButtonModule,
+    IconModule,
    InputModule,
    JslibModule,
    PasswordCalloutComponent,
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -1,11 +1,10 @@
 <ng-container *ngIf="loading">
  <div class="tw-text-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin bwi-2x tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
  </div>
 </ng-container>

--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -53,6 +53,7 @@ import {
  AsyncActionsModule,
  ButtonModule,
  CheckboxModule,
+  IconModule,
  DialogService,
  FormFieldModule,
  ToastService,
@@ -79,6 +80,7 @@ enum State {
    ButtonModule,
    CheckboxModule,
    CommonModule,
+    IconModule,
    FormFieldModule,
    JslibModule,
    ReactiveFormsModule,
--- a/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html
+++ b/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="loading">
  <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
  </div>
 </ng-container>

--- a/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts
+++ b/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts
@@ -36,7 +36,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { ButtonModule, LinkModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, LinkModule, IconModule, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";

 import { AuthRequestApiServiceAbstraction } from "../../common/abstractions/auth-request-api.service";
@@ -60,7 +60,7 @@ const matchOptions: IsActiveMatchOptions = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  templateUrl: "./login-via-auth-request.component.html",
-  imports: [ButtonModule, CommonModule, JslibModule, LinkModule, RouterModule],
+  imports: [ButtonModule, CommonModule, JslibModule, LinkModule, RouterModule, IconModule],
  providers: [{ provide: LoginViaAuthRequestCacheService }],
 })
 export class LoginViaAuthRequestComponent implements OnInit, OnDestroy {
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -65,7 +65,7 @@
          [addTooltipToDescribedby]="ssoRequired"
          [disabled]="ssoRequired"
        >
-          <i class="bwi bwi-passkey tw-mr-1" aria-hidden="true"></i>
+          <bit-icon name="bwi-passkey" class="tw-mr-1"></bit-icon>
          {{ "logInWithPasskey" | i18n }}
        </button>
      </ng-container>
@@ -78,7 +78,7 @@
        [buttonType]="ssoRequired ? 'primary' : 'secondary'"
        (click)="handleSsoClick()"
      >
-        <i class="bwi bwi-provider tw-mr-1" aria-hidden="true"></i>
+        <bit-icon name="bwi-provider" class="tw-mr-1"></bit-icon>
        {{ "useSingleSignOn" | i18n }}
      </button>
    </div>
@@ -114,7 +114,7 @@
          buttonType="secondary"
          (click)="startAuthRequestLogin()"
        >
-          <i class="bwi bwi-mobile" aria-hidden="true"></i>
+          <bit-icon name="bwi-mobile"></bit-icon>
          {{ "loginWithDevice" | i18n }}
        </button>
      </ng-container>
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -52,6 +52,7 @@ import {
  CheckboxModule,
  FormFieldModule,
  IconButtonModule,
+  IconModule,
  LinkModule,
  ToastService,
  TooltipDirective,
@@ -79,6 +80,7 @@ export enum LoginUiState {
    CommonModule,
    FormFieldModule,
    IconButtonModule,
+    IconModule,
    LinkModule,
    JslibModule,
    ReactiveFormsModule,
--- a/libs/auth/src/angular/registration/registration-finish/registration-finish.component.html
+++ b/libs/auth/src/angular/registration/registration-finish/registration-finish.component.html
@@ -1,5 +1,5 @@
 <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
-  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+  <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
 </div>

 <auth-input-password
--- a/libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts
+++ b/libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts
@@ -17,7 +17,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
+import { AnonLayoutWrapperDataService, ToastService, IconModule } from "@bitwarden/components";

 import {
  LoginStrategyServiceAbstraction,
@@ -43,7 +43,7 @@ type MarketingInitiative = (typeof MarketingInitiative)[keyof typeof MarketingIn
@Component({
  selector: "auth-registration-finish",
  templateUrl: "./registration-finish.component.html",
-  imports: [CommonModule, JslibModule, RouterModule, InputPasswordComponent],
+  imports: [CommonModule, JslibModule, RouterModule, InputPasswordComponent, IconModule],
 })
 export class RegistrationFinishComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
--- a/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html
+++ b/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html
@@ -16,11 +16,10 @@
      </bit-form-field>

      <button bitLink linkType="primary" type="button" (click)="showCustomEnv = !showCustomEnv">
-        <i
-          class="bwi bwi-fw bwi-sm"
-          [ngClass]="{ 'bwi-angle-right': !showCustomEnv, 'bwi-angle-down': showCustomEnv }"
-          aria-hidden="true"
-        ></i>
+        <bit-icon
+          [name]="showCustomEnv ? 'bwi-angle-down' : 'bwi-angle-right'"
+          class="bwi-fw bwi-sm"
+        ></bit-icon>
        {{ "customEnvironment" | i18n }}
      </button>

@@ -91,7 +90,7 @@
        aria-live="assertive"
        role="alert"
      >
-        <i class="bwi bwi-error"></i> {{ "selfHostedEnvFormInvalid" | i18n }}
+        <bit-icon name="bwi-error"></bit-icon> {{ "selfHostedEnvFormInvalid" | i18n }}
      </span>
    </ng-container>
    <ng-container bitDialogFooter>
--- a/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts
+++ b/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts
@@ -27,6 +27,7 @@ import {
  DialogModule,
  DialogService,
  FormFieldModule,
+  IconModule,
  LinkModule,
  TypographyModule,
 } from "@bitwarden/components";
@@ -85,6 +86,7 @@ function onlyHttpsValidator(): ValidatorFn {
    JslibModule,
    DialogModule,
    ButtonModule,
+    IconModule,
    LinkModule,
    TypographyModule,
    ReactiveFormsModule,
--- a/libs/auth/src/angular/sso/sso.component.html
+++ b/libs/auth/src/angular/sso/sso.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-container">
  <div *ngIf="loggingIn">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
    {{ "loading" | i18n }}
  </div>
  <div *ngIf="!loggingIn">
--- a/libs/auth/src/angular/sso/sso.component.ts
+++ b/libs/auth/src/angular/sso/sso.component.ts
@@ -42,6 +42,7 @@ import {
  CheckboxModule,
  FormFieldModule,
  IconButtonModule,
+  IconModule,
  LinkModule,
  ToastService,
 } from "@bitwarden/components";
@@ -73,6 +74,7 @@ interface QueryParams {
    CommonModule,
    FormFieldModule,
    IconButtonModule,
+    IconModule,
    LinkModule,
    JslibModule,
    ReactiveFormsModule,
--- a/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html
+++ b/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html
@@ -1,6 +1,6 @@
 <div id="web-authn-frame" class="tw-mb-3" *ngIf="!webAuthnNewTab">
  <div *ngIf="!webAuthnReady" class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
  </div>

  <iframe
--- a/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts
@@ -22,6 +22,7 @@ import {
  TypographyModule,
  FormFieldModule,
  AsyncActionsModule,
+  IconModule,
  ToastService,
 } from "@bitwarden/components";

@@ -48,6 +49,7 @@ export interface WebAuthnResult {
    FormFieldModule,
    AsyncActionsModule,
    FormsModule,
+    IconModule,
  ],
  providers: [],
 })
--- a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="loading">
  <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
  </div>
 </ng-container>

--- a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
@@ -55,6 +55,7 @@ import {
  DialogService,
  FormFieldModule,
  ToastService,
+  IconModule,
 } from "@bitwarden/components";

 import { TwoFactorAuthAuthenticatorComponent } from "./child-components/two-factor-auth-authenticator/two-factor-auth-authenticator.component";
@@ -88,6 +89,7 @@ import {
    AsyncActionsModule,
    CheckboxModule,
    ButtonModule,
+    IconModule,
    TwoFactorAuthAuthenticatorComponent,
    TwoFactorAuthEmailComponent,
    TwoFactorAuthDuoComponent,
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
@@ -46,7 +46,7 @@
        </div>
        <p class="tw-font-medium tw-mb-1">{{ "verifyWithBiometrics" | i18n }}</p>
        <div *ngIf="!biometricsVerificationFailed">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
          {{ "awaitingConfirmation" | i18n }}
        </div>
      </div>
@@ -116,7 +116,7 @@
  </ng-container>
  <ng-container *ngIf="userVerificationOptions.server.otp">
    <div class="tw-mb-6" *ngIf="!sentInitialCode">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
    </div>

    <div class="tw-mb-6" *ngIf="sentInitialCode">
@@ -128,7 +128,7 @@
        </button>

        <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
-          <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+          <bit-icon name="bwi-check-circle"></bit-icon>
          {{ "codeSent" | i18n }}
        </span>
      </p>
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
@@ -29,6 +29,7 @@ import {
  FormFieldModule,
  IconButtonModule,
  SvgModule,
+  IconModule,
  LinkModule,
 } from "@bitwarden/components";

@@ -64,6 +65,7 @@ import { ActiveClientVerificationOption } from "./active-client-verification-opt
    FormFieldModule,
    AsyncActionsModule,
    IconButtonModule,
+    IconModule,
    SvgModule,
    LinkModule,
    ButtonModule,