Use a Firefox-allowlisted Material Symbols family for unfilled editor icons (#32945)

GitOrigin-RevId: 61b7e4044f9a57a2083c5467fa0ec6eaa0f9ae1e

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,

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 }} />