From 6127bebd5f32f53c74b4446a9f3ecb77737cde9b Mon Sep 17 00:00:00 2001
From: cryptalith <leomendoza123@gmail.com>
Date: Wed, 26 Aug 2026 17:41:09 -0600
Subject: [PATCH] PD-6198 outlined icons

---
 .../backup-email.component.html               |  4 +--
 .../backup-email.component.spec.ts            | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html
index 716f7539e..0c09876c0 100644
--- a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html
+++ b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.html
@@ -29,13 +29,13 @@ <h2 class="orc-font-body" i18n="@@interstitial.yourPrimaryEmailAddress">
         class="email-category"
         *ngIf="primaryEmailCategory === 'PROFESSIONAL'"
       >
-        <mat-icon class="material-icons-outlined">work</mat-icon>
+        <mat-icon class="material-symbols-outlined">work</mat-icon>
         <span class="orc-font-small-print" i18n="@@interstitial.professional"
           >Professional</span
         >
       </div>
       <div class="email-category" *ngIf="primaryEmailCategory === 'PERSONAL'">
-        <mat-icon class="material-icons-outlined">fingerprint</mat-icon>
+        <mat-icon class="material-symbols-outlined">fingerprint</mat-icon>
         <span class="orc-font-small-print" i18n="@@interstitial.personal"
           >Personal</span
         >
diff --git a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts
index 7aeb90986..c310427d3 100644
--- a/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts
+++ b/src/app/cdk/interstitials/backup-email/interstitial-component/backup-email.component.spec.ts
@@ -207,6 +207,33 @@ describe('BackupEmailComponent', () => {
       expect(component.primaryEmailCategory).toBe('PROFESSIONAL')
     })
 
+    // The outlined look comes from the Material Symbols font. The
+    // `material-icons-outlined` class these used to carry matches no loaded
+    // stylesheet, so it silently fell back to the filled font (PD-6198).
+    it('should draw the professional category icon in the outlined font', () => {
+      const icon = fixture.nativeElement.querySelector(
+        '.email-category mat-icon'
+      )
+
+      expect(icon.textContent.trim()).toBe('work')
+      expect(icon.classList).toContain('material-symbols-outlined')
+    })
+
+    it('should draw the personal category icon in the outlined font', () => {
+      emailCategory = () =>
+        of({ category: 'PERSONAL', rorId: null } as EmailCategoryEndpoint)
+
+      const newFixture = TestBed.createComponent(BackupEmailComponent)
+      newFixture.detectChanges()
+
+      const icon = newFixture.nativeElement.querySelector(
+        '.email-category mat-icon'
+      )
+
+      expect(icon.textContent.trim()).toBe('fingerprint')
+      expect(icon.classList).toContain('material-symbols-outlined')
+    })
+
     it('should leave the category out when the lookup fails', () => {
       emailCategory = () => throwError(() => new Error('lookup failed'))