Remove material symbols

[zetter-rpf]

I did some investigation into our bundle size. Material symbols was taking up 80% even though we don't use many symbols (only the alert symbol for one error message)

Bundle size:

Not loading material symbols will make the code editor load faster and perform better in slower devices.

We're likely to want 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.

We could apply one of these now, but I think it would be helpful to have more example of symbols we want to use before we do which is why my preference is to remove them for now.

Visual changes

The only change is to remove the symbol used for an alert that I expect a very small proportion of our users see. Before:

[Copilot]

Pull request overview

Removes the material-symbols dependency and related font/style loading to reduce bundle size, replacing the one in-product usage (error alert icon) with a lightweight CSS-variable override.

Changes:

• Removed material-symbols from package.json and yarn.lock.
• Stopped loading Material Symbols via @use in SCSS, a JS side-effect import, and the demo page Google Fonts <link>.
• Added a --rpf-alert-error-icon CSS custom property override for the web component root.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
yarn.lock	Removes the locked material-symbols package entry.
package.json	Drops material-symbols from dependencies.
src/web-component.html	Removes external Google Fonts stylesheet for Material Symbols from the demo page.
src/components/Editor/EditorPanel/EditorPanel.jsx	Removes the material-symbols side-effect import.
src/assets/stylesheets/ExternalStyles.scss	Stops importing the Material Symbols sharp SCSS.
src/assets/stylesheets/index.scss	Overrides the alert error icon via --rpf-alert-error-icon on #wc.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[maxelkins]

I think ideally we'd use the icon, since it just keeps the design of that component consistent with other places we use it. But its hard to argue shipping the font file for that 1 icon, so I understand the choice to remove it 👍

Maybe we just display: none .rpf-alert__icon so it looks like:

[zetter-rpf]

I think ideally we'd use the icon, since it just keeps the design of that component consistent with other places we use it. But its hard to argue shipping the font file for that 1 icon, so I understand the choice to remove it 👍

Maybe we just display: none .rpf-alert__icon so it looks like:

No prob, I've removed the icon as you suggested.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/assets/stylesheets/EditorPanel.scss:64

• There are two trailing blank lines here, but other SCSS files in the codebase (like ExternalStyles.scss and EditorInput.scss) end with only one blank line. Consider removing one of these blank lines to maintain consistency.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/assets/stylesheets/EditorPanel.scss:65

• There are extra blank lines at the end of the file. Consider removing the trailing blank lines (lines 64-65) to maintain consistency with the rest of the codebase.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.