diff --git a/ts/csstools.elementbasicsetup.ts b/ts/csstools.elementbasicsetup.ts
index 122c6b0..8328850 100644
--- a/ts/csstools.elementbasicsetup.ts
+++ b/ts/csstools.elementbasicsetup.ts
@@ -8,7 +8,10 @@ export const elementBasicSetup = async () => {
   if (globalThis.deesCssToolsReady) {
     await globalThis.deesCssToolsReady.promise;
   } else {
+    // lets prevent double execution
     globalThis.deesCssToolsReady = defer();
+
+    // lets make sure the dom is ready
     const documentReady = defer();
     document.onreadystatechange = () => {
       if (document.readyState === 'interactive') {
@@ -16,10 +19,26 @@ export const elementBasicSetup = async () => {
       }
     };
     await documentReady.promise;
+
+    // lets get started
     const head = document.querySelector('head');
+    const body = document.querySelector('body');
+
+    // material font
+    const materialFontCss = `
+      @font-face {
+        font-family: 'Material Icons';
+        font-style: normal;
+        font-weight: 400;
+        src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
+      }
+    `;
     const styleElement = document.createElement('style');
     styleElement.type = 'text/css';
     styleElement.appendChild(document.createTextNode(materialFontCss));
+    head.appendChild(styleElement);
+
+
     globalThis.deesCssToolsReady.resolve();
   }
 };