diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34a89b6fd..5f91669b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - Issue where clicking the tick icon would not save a filename when editing (#1237)
+- Fixed loading of Material Symbols font (#1229)
 
 ## [0.30.2] - 2025-07-22
 
diff --git a/package.json b/package.json
index 1ea8b8759..2b5d2dbc1 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-core": "^1.6.0",
-    "@raspberrypifoundation/design-system-react": "^1.6.0",
+    "@raspberrypifoundation/design-system-react": "^2.4.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 83acc15eb..50f084e6d 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -3,4 +3,5 @@
 @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/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
-@use "../../../node_modules/material-symbols/sharp.scss";
+
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp");
diff --git a/src/web-component.js b/src/web-component.js
index e75350097..55605b884 100644
--- a/src/web-component.js
+++ b/src/web-component.js
@@ -172,6 +172,20 @@ class WebComponent extends HTMLElement {
       this.root = ReactDOMClient.createRoot(this.mountPoint);
     }
 
+    // Inject Material Symbols to host app as the font needs to be in both the shadow DOM and the host app to work correctly
+    if (
+      !document.head.querySelector(
+        'link[href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp"]',
+      )
+    ) {
+      document.head.innerHTML +=
+        '<link rel="preconnect" href="https://fonts.googleapis.com">';
+      document.head.innerHTML +=
+        '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
+      document.head.innerHTML +=
+        '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" type="text/css"/>';
+    }
+
     this.root.render(
       <React.StrictMode>
         <Provider store={store}>
diff --git a/yarn.lock b/yarn.lock
index f800fb29e..13905cd8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2715,28 +2715,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@raspberrypifoundation/design-system-core@npm:1.6.0"
+"@raspberrypifoundation/design-system-core@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@raspberrypifoundation/design-system-core@npm:2.3.0"
   dependencies:
     classnames: ^2.3.2
-  checksum: 3eda17c4068e752daf070b6cbce9630b1b51997b911a4753b73f2c3726a40ec6bfba1b751380a4ad6f51e3e2e8e9cac66a7709343a7de9c5c8b074b409742a26
+  checksum: 107aad6b62f7a2dc5226bef7f1f5c647a285432139636d6378a57912d64a226ef3c1e7b7e8dade02a8dd797fbd85fd68f96bf4a4d509f428715565257ca8321d
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:1.6.0"
+"@raspberrypifoundation/design-system-react@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.4.0"
   dependencies:
-    classnames: ^2.3.2
-    material-symbols: ^0.14.5
-    prop-types: ^15.8.1
-    react: ^18.2.0
-    react-dom: ^18.2.0
-    react-router-dom: ^6.24.0
+    "@raspberrypifoundation/design-system-core": ^2.3.0
+    classnames: ^2.5.1
+    react: ^18.3.1
+    react-dom: ^18.3.1
+    react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5
+  checksum: af10fc655fd9663cc8002600e87c7ac7b7eb34671dd7bd6d6407257f079cca44f29be87d0ad547ed3838adf4336bbb7cf9cd2d97c37ae87565717298ba7bb9bc
   languageName: node
   linkType: hard
 
@@ -2758,8 +2757,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-core": ^1.6.0
-    "@raspberrypifoundation/design-system-react": ^1.6.0
+    "@raspberrypifoundation/design-system-react": ^2.4.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1
@@ -3096,13 +3094,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.21.0":
-  version: 1.21.0
-  resolution: "@remix-run/router@npm:1.21.0"
-  checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc
-  languageName: node
-  linkType: hard
-
 "@replit/codemirror-indentation-markers@npm:^6.1.0":
   version: 6.5.3
   resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
@@ -6135,7 +6126,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2":
+"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -6521,6 +6512,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55
+  languageName: node
+  linkType: hard
+
 "copy-descriptor@npm:^0.1.0":
   version: 0.1.1
   resolution: "copy-descriptor@npm:0.1.1"
@@ -12539,13 +12537,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"material-symbols@npm:^0.14.5":
-  version: 0.14.7
-  resolution: "material-symbols@npm:0.14.7"
-  checksum: 191dea0145eadabd3122b891b965d8568793c3f53a540186a30b459948a8a0c00938642dcca3c4fcca483b08d7480d02722c6de10caeeeae30437306a79f64b6
-  languageName: node
-  linkType: hard
-
 "material-symbols@npm:^0.27.0":
   version: 0.27.0
   resolution: "material-symbols@npm:0.27.0"
@@ -15210,7 +15201,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.1.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -15409,19 +15400,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.24.0":
-  version: 6.28.0
-  resolution: "react-router-dom@npm:6.28.0"
-  dependencies:
-    "@remix-run/router": 1.21.0
-    react-router: 6.28.0
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 0cf4658a92bc66f50ec9d8518c36aa5a402bcadce71fb624ed6f900d73a29ea87ff904a4f2c42279107e75e80cc08c6192563fadcc5d4e642e6d476e38e83b21
-  languageName: node
-  linkType: hard
-
 "react-router-dom@npm:^6.7.0":
   version: 6.27.0
   resolution: "react-router-dom@npm:6.27.0"
@@ -15435,6 +15413,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^7.0.2":
+  version: 7.6.3
+  resolution: "react-router-dom@npm:7.6.3"
+  dependencies:
+    react-router: 7.6.3
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 3fc1d18ac17d1152069129b5c670b21286bc461c13da0af538508132585a7d5174cd93f7f4bef7d155c60fe0fcf004e1b3a12b98c37b1ee70b0ab45ab5e629b2
+  languageName: node
+  linkType: hard
+
 "react-router@npm:6.27.0":
   version: 6.27.0
   resolution: "react-router@npm:6.27.0"
@@ -15446,14 +15436,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:6.28.0":
-  version: 6.28.0
-  resolution: "react-router@npm:6.28.0"
+"react-router@npm:7.6.3":
+  version: 7.6.3
+  resolution: "react-router@npm:7.6.3"
   dependencies:
-    "@remix-run/router": 1.21.0
+    cookie: ^1.0.1
+    set-cookie-parser: ^2.6.0
   peerDependencies:
-    react: ">=16.8"
-  checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 76930e79cb261bc48ea67851fdd625e165366a6c50b6b0799e147f8964b6a81a9fba447dd5002357a4356741240669afa9bbaee33625a356e89c39421c147b3f
   languageName: node
   linkType: hard
 
@@ -15539,7 +15534,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.1.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -16582,6 +16577,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.1":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"