From 32f5ac48c751b43f528d85f59a1185aee222e0b6 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Tue, 5 May 2026 15:50:18 +0100
Subject: [PATCH] Use a Firefox-allowlisted Material Symbols family for
 unfilled editor icons (#32945)

GitOrigin-RevId: 61b7e4044f9a57a2083c5467fa0ec6eaa0f9ae1e
---
 .../frontend/fonts/material-symbols/material-symbols.css | 8 ++++++--
 .../frontend/components/shared/material-icon.spec.tsx    | 9 ++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/fonts/material-symbols/material-symbols.css b/services/web/frontend/fonts/material-symbols/material-symbols.css
index 6ffcdd4288..18640ec24c 100644
--- a/services/web/frontend/fonts/material-symbols/material-symbols.css
+++ b/services/web/frontend/fonts/material-symbols/material-symbols.css
@@ -3,6 +3,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
+
   /*
     Generated from MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 with specific values:
    'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20
@@ -11,10 +12,12 @@
 }
 
 @font-face {
-  font-family: 'Material Symbols Rounded Unfilled Partial';
+  /* note: was "Material Symbols Rounded Unfilled Partial" but must be a name in Firefox's icon_font_allowlist */
+  font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
   font-display: block;
+
   /*
     Generated by frontend/fonts/material-symbols/build-unfilled.mjs
     */
@@ -50,7 +53,8 @@
   }
 
   &.unfilled {
-    font-family: 'Material Symbols Rounded Unfilled Partial';
+    /* note: was "Material Symbols Rounded Unfilled Partial" but must be a name in Firefox's icon_font_allowlist */
+    font-family: 'Material Symbols Outlined';
     font-variation-settings:
       'FILL' 0,
       'wght' 400,
diff --git a/services/web/test/frontend/components/shared/material-icon.spec.tsx b/services/web/test/frontend/components/shared/material-icon.spec.tsx
index 6a87afda07..dc7ece39bb 100644
--- a/services/web/test/frontend/components/shared/material-icon.spec.tsx
+++ b/services/web/test/frontend/components/shared/material-icon.spec.tsx
@@ -15,7 +15,14 @@ describe('MaterialIcon', function () {
   })
 
   describe('Unfilled', function () {
-    it('Contain all unfilled symbol', function () {
+    it('uses a Firefox allowlisted icon font family name', function () {
+      cy.mount(<MaterialIcon type="description" unfilled />)
+      cy.get('.material-symbols.unfilled')
+        .invoke('css', 'font-family')
+        .should('contain', 'Material Symbols Outlined')
+    })
+
+    it('contains all unfilled symbols', function () {
       for (const type of unfilledIconTypes) {
         cy.mount(
           <MaterialIcon type={type} unfilled style={{ fontSize: FONT_SIZE }} />