From 9381b7621378884fc63bf3b776c39f3392a2cda8 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:33:49 +0000
Subject: [PATCH 1/3] Remove extra material symbols
Even if we did want to continue using material icons, this isn't needed here are we are importing the specific icon file we need elsewhere in CSS
---
src/components/Editor/EditorPanel/EditorPanel.jsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/Editor/EditorPanel/EditorPanel.jsx b/src/components/Editor/EditorPanel/EditorPanel.jsx
index 59d69020c..b2c2369e0 100644
--- a/src/components/Editor/EditorPanel/EditorPanel.jsx
+++ b/src/components/Editor/EditorPanel/EditorPanel.jsx
@@ -14,7 +14,6 @@ import { EditorState } from "@codemirror/state";
import { defaultKeymap, indentWithTab } from "@codemirror/commands";
import { indentationMarkers } from "@replit/codemirror-indentation-markers";
import { indentUnit } from "@codemirror/language";
-import "material-symbols";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";
From 43db2db2e488ad2c0f6bad760171ac7504949732 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:38:43 +0000
Subject: [PATCH 2/3] Remove our only use of a material symbol
I've confirmed this is the only use of a material symbol. The only other item in the design library that we are using is Button and we never pass it a icon name in the icon prop. We also have no class references to 'material-symbols' anywhere.
Hide the symbol rather than showing it.
---
src/assets/stylesheets/EditorPanel.scss | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index 8c609a430..9e4240de1 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -55,4 +55,10 @@
.rpf-alert {
margin: 0;
+
+ .rpf-alert__icon {
+ display: none;
+ }
}
+
+
From 2998007312c56bb62b9142e779926e66e57f7ac8 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:46:28 +0000
Subject: [PATCH 3/3] Remove Material Symbols
Material symbols was taking up 80% of our bundle size all so that we could use an alert symbol in one place.
Not loading material symbols will make the code editor load faster and perform better in slower devices.
It might be useful to use symbols in the future, especially since other components in the design library use material symbols. Then we have a few options:
+ Instead of using material symbols, use our own icons
+ Include just the material symbol font we're using from the material-symbols package
+ Require the host page to load the material symbols font. The web component would just need to define styles on '.material-symbols-sharp' as the material-symbols library does.
---
package.json | 1 -
src/assets/stylesheets/ExternalStyles.scss | 1 -
src/web-component.html | 4 ----
yarn.lock | 8 --------
4 files changed, 14 deletions(-)
diff --git a/package.json b/package.json
index 43b6e3521..b6648aa6b 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
"jszip": "^3.10.1",
"jszip-utils": "^0.1.0",
"marked": "^15.0.6",
- "material-symbols": "^0.27.0",
"mime-types": "^2.1.35",
"node-html-parser": "^6.1.5",
"oidc-client": "^1.11.5",
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 1785f03a1..a3d506a66 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -4,5 +4,4 @@
@use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
@use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
@use "../../../node_modules/react-toastify/dist/ReactToastify.css";
-@use "../../../node_modules/material-symbols/sharp.css";
@use "../../../node_modules/plotly.js/dist/plotly.css" as plotlyStyle;
diff --git a/src/web-component.html b/src/web-component.html
index 5ae1fde18..18ae7cab7 100644
--- a/src/web-component.html
+++ b/src/web-component.html
@@ -51,10 +51,6 @@
Editor Web component
-