diff --git a/services/web/test/frontend/components/shared/material-icon.spec.tsx b/services/web/test/frontend/components/shared/material-icon.spec.tsx
new file mode 100644
index 0000000000..52a34a939a
--- /dev/null
+++ b/services/web/test/frontend/components/shared/material-icon.spec.tsx
@@ -0,0 +1,31 @@
+import MaterialIcon from '@/shared/components/material-icon'
+import unfilledIconTypes from '../../../../frontend/fonts/material-symbols/unfilled-symbols.mjs'
+import '../../helpers/bootstrap-3'
+
+const FONT_SIZE = 40
+
+describe('MaterialIcon', function () {
+  describe('Filled', function () {
+    it('contains symbols', function () {
+      cy.mount(<MaterialIcon type="home" style={{ fontSize: FONT_SIZE }} />)
+      cy.get('.material-symbols').as('icon')
+      cy.get('@icon')
+        .invoke('width')
+        .should('be.within', FONT_SIZE - 1, FONT_SIZE + 1)
+    })
+  })
+
+  describe('Unfilled', function () {
+    it('Contain all unfilled symbol', function () {
+      for (const type of unfilledIconTypes) {
+        cy.mount(
+          <MaterialIcon type={type} unfilled style={{ fontSize: FONT_SIZE }} />
+        )
+        cy.get('.material-symbols').as('icon')
+        cy.get('@icon')
+          .invoke('width')
+          .should('be.within', FONT_SIZE - 1, FONT_SIZE + 1)
+      }
+    })
+  })
+})