diff --git a/apps/exampleapp/esbuild.config.js b/apps/exampleapp/esbuild.config.js
index 89494caed..3a81bef22 100644
--- a/apps/exampleapp/esbuild.config.js
+++ b/apps/exampleapp/esbuild.config.js
@@ -7,6 +7,7 @@ const { transform } = require("@svgr/core")
 const url = require("postcss-url")
 // this function generates app props based on package.json and propSecrets.json
 const appProps = require("../../helpers/appProps")
+const path = require("path")
 
 if (!/.+\/.+\.js/.test(pkg.module))
   throw new Error(
@@ -42,6 +43,23 @@ const build = async () => {
   await fs.rm(outdir, { recursive: true, force: true })
   await fs.mkdir(outdir, { recursive: true })
 
+  // copy folder with fs.cpsync the material design icons to build folder
+  // we need to resolve the node package in node_modules
+
+  const iconsPath = path.resolve(
+    path.dirname(
+      require.resolve("@material-design-icons/svg/filled/account_circle.svg")
+    ),
+    "../"
+  )
+
+  await fs.cp(`${iconsPath}/filled`, `${outdir}/svg/filled`, {
+    recursive: true,
+  })
+  await fs.cp(`${iconsPath}/outlined`, `${outdir}/svg/outlined`, {
+    recursive: true,
+  })
+
   // build app
   let ctx = await esbuild.context({
     bundle: true,
diff --git a/apps/exampleapp/package.json b/apps/exampleapp/package.json
index 9f27520ea..653c5fd50 100644
--- a/apps/exampleapp/package.json
+++ b/apps/exampleapp/package.json
@@ -41,7 +41,8 @@
     "url-state-provider": "*",
     "util": "^0.12.4",
     "utils": "*",
-    "zustand": "4.3.7"
+    "zustand": "4.3.7",
+    "@material-design-icons/svg": "^0.14.4"
   },
   "scripts": {
     "test": "jest",
diff --git a/apps/exampleapp/src/components/AppContent.js b/apps/exampleapp/src/components/AppContent.js
index a988068c7..d2b11140a 100644
--- a/apps/exampleapp/src/components/AppContent.js
+++ b/apps/exampleapp/src/components/AppContent.js
@@ -22,6 +22,7 @@ import ModalManager from "./ModalManager"
 import PanelManager from "./PanelManager"
 import Peaks from "./peaks/Peaks"
 import WelcomeView from "./WelcomeView"
+import DynamicLoadIcon from "./DynamicLoadIcon"
 
 const AppContent = (props) => {
   const { setTabIndex, setCurrentModal } = useGlobalsActions()
@@ -57,6 +58,7 @@ const AppContent = (props) => {
               <TabList>
                 <Tab>Peaks</Tab>
                 <Tab>Tab Two</Tab>
+                <Tab>Tab Three</Tab>
               </TabList>
 
               <TabPanel>
@@ -93,6 +95,9 @@ const AppContent = (props) => {
                   </Select>
                 </Container>
               </TabPanel>
+              <TabPanel>
+                <DynamicLoadIcon />
+              </TabPanel>
             </MainTabs>
             <ModalManager />
           </Container>
diff --git a/apps/exampleapp/src/components/DynamicLoadIcon.jsx b/apps/exampleapp/src/components/DynamicLoadIcon.jsx
new file mode 100644
index 000000000..69ae1eebd
--- /dev/null
+++ b/apps/exampleapp/src/components/DynamicLoadIcon.jsx
@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from "react"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Container,
+  Button,
+  MainTabs,
+  Tab,
+  TabList,
+  TabPanel,
+  Select,
+  SelectOption,
+  FormRow,
+  TextInput,
+} from "juno-ui-components"
+
+// from camelcase to underscore
+// https://stackoverflow.com/questions/4149276/javascript-camelcase-to-regular-form
+const camelToSnake = (str) =>
+  str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`)
+
+const MaterialIcon = ({ name, width, height }) => {
+  const ref = useRef()
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    fetch(new URL(`./svg/filled/${name}.svg`, import.meta.url))
+      .then((r) => {
+        return r.text()
+      })
+      .then((text) => {
+        ref.current.innerHTML = text
+        ref.current.children[0].setAttribute("width", width)
+        ref.current.children[0].setAttribute("height", height)
+        ref.current.replaceWith(ref.current.children[0])
+      })
+  }, [ref.current, name, height, width])
+
+  return <div ref={ref}></div>
+}
+
+const DynamicLoadIcon = () => {
+  const [iconComponent, setIconComponent] = useState(null)
+  const [iconAttributes, setIconAttributes] = useState({
+    name: "account_circle",
+    width: 24,
+    height: 24,
+    alt: "",
+    title: "",
+  })
+  const [svg, setSvg] = useState(null)
+
+  return (
+    <>
+      <Container px={false} py={true}>
+        <FormRow>
+          <TextInput
+            label="Name"
+            value={iconAttributes.name}
+            placeholder="Icon name"
+            onChange={(event) => {
+              setIconAttributes({ ...iconAttributes, name: event.target.value })
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <TextInput
+            label="Height"
+            placeholder="Icon height"
+            onChange={(event) => {
+              setIconAttributes({
+                ...iconAttributes,
+                height: event.target.value,
+              })
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <TextInput
+            label="Width"
+            placeholder="Icon width"
+            onChange={(event) => {
+              setIconAttributes({
+                ...iconAttributes,
+                width: event.target.value,
+              })
+            }}
+          />
+        </FormRow>
+        <FormRow>
+          <TextInput label="Alt" placeholder="Icon alt" />
+        </FormRow>
+        <FormRow>
+          <TextInput label="Title" placeholder="Icon title" />
+        </FormRow>
+      </Container>
+      {/* {iconComponent && iconComponent} */}
+      <MaterialIcon
+        name={iconAttributes.name}
+        width={iconAttributes.width}
+        height={iconAttributes.height}
+      />
+    </>
+  )
+}
+
+export default DynamicLoadIcon
diff --git a/package-lock.json b/package-lock.json
index 8035e21a7..c3392a814 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -235,6 +235,7 @@
         "@babel/core": "^7.20.2",
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-react": "^7.18.6",
+        "@material-design-icons/svg": "^0.14.4",
         "@svgr/core": "^7.0.0",
         "@svgr/plugin-jsx": "^7.0.0",
         "@tanstack/react-query": "4.28.0",
@@ -293,7 +294,7 @@
       }
     },
     "apps/greenhouse": {
-      "version": "0.1.5",
+      "version": "0.1.8",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.20.2",
@@ -1583,7 +1584,7 @@
       }
     },
     "libs/juno-ui-components": {
-      "version": "2.6.8",
+      "version": "2.6.9",
       "license": "Apache-2.0",
       "devDependencies": {
         "@babel/plugin-transform-parameters": "^7.22.5",
@@ -1792,7 +1793,7 @@
       }
     },
     "libs/url-state-router": {
-      "version": "1.0.1",
+      "version": "1.0.3",
       "license": "Apache-2.0",
       "devDependencies": {
         "@babel/core": "^7.20.2",
@@ -1819,6 +1820,7 @@
         "url-state-provider": "*"
       },
       "peerDependencies": {
+        "prop-types": "^15.8.1",
         "react": "18.2.0",
         "react-dom": "^18.2.0",
         "url-state-provider": "*"
@@ -1981,7 +1983,7 @@
       }
     },
     "libs/utils": {
-      "version": "1.0.6",
+      "version": "1.1.2",
       "license": "Apache-2.0",
       "devDependencies": {
         "@babel/preset-env": "^7.20.2",