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()
+ 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(