diff --git a/core/src/theme-ionic/test/assets/apps.svg b/core/src/theme-ionic/test/assets/apps.svg
new file mode 100644
index 0000000000..730d8feaf0
--- /dev/null
+++ b/core/src/theme-ionic/test/assets/apps.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#000000" viewBox="0 0 256 256"><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48v48Z"></path></svg>
\ No newline at end of file
diff --git a/core/src/theme-ionic/test/assets/settings.svg b/core/src/theme-ionic/test/assets/settings.svg
new file mode 100644
index 0000000000..264e063ecb
--- /dev/null
+++ b/core/src/theme-ionic/test/assets/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="#000000" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A112.1,112.1,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.62a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.08,8.08,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8.08,8.08,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z"></path></svg>
\ No newline at end of file
diff --git a/core/src/theme-ionic/test/assets/triangle_dark.svg b/core/src/theme-ionic/test/assets/triangle_dark.svg
new file mode 100644
index 0000000000..d046b0537e
--- /dev/null
+++ b/core/src/theme-ionic/test/assets/triangle_dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" fill="#000000" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.34,24.34,0,0,0,40.55,224h174.9a24.34,24.34,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8Z"></path></svg>
\ No newline at end of file
diff --git a/core/src/theme-ionic/test/dear-designer-bottom-bar/index.html b/core/src/theme-ionic/test/dear-designer-bottom-bar/index.html
new file mode 100644
index 0000000000..62e994cc0f
--- /dev/null
+++ b/core/src/theme-ionic/test/dear-designer-bottom-bar/index.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+    <head>
+    <meta charset="UTF-8" />
+    <title>Ionic Theme</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    /> 
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-grid>
+              <ion-row>
+                <ion-col></ion-col>
+                <ion-col size="10">
+                  <h5 class="roboto">Dear Designer</h5>
+                  <h1 style="font-weight: 700" class="roboto">Bottom Bar</h1>      
+                </ion-col>
+                <ion-col></ion-col>
+              </ion-row>
+            </ion-grid>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-grid>
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="10">
+              <ion-card shape="rectangular" class="preview">
+                <ion-card-content>
+                  <ion-tabs class="bottom-bar-preview">
+                    <ion-tab-bar slot="bottom">
+                      <ion-tab-button tab="dashboard">
+                        <ion-icon src="/src/theme-ionic/test/assets/triangle_dark.svg"></ion-icon>
+                        Dashboard
+                      </ion-tab-button>
+                      <ion-tab-button tab="apps">
+                        <ion-icon src="/src/theme-ionic/test/assets/apps.svg"></ion-icon>
+                        Apps
+                      </ion-tab-button>
+                      <ion-tab-button tab="settings">
+                        <ion-icon src="/src/theme-ionic/test/assets/settings.svg"></ion-icon>
+                        Settings
+                      </ion-tab-button>
+                    </ion-tab-bar>
+                  </ion-tabs>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+      
+        
+        </ion-grid>
+       
+       
+      </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-app>
+
+    <style>
+      
+    </style>
+  </body>
+</html>
+
+
+<style>
+
+  .roboto{
+    font-family: 'Roboto';
+  }
+  ion-header ion-toolbar{
+    --background:#105CEF;
+    color: white;
+    --padding-top:30px;
+    --padding-bottom:30px;
+  }
+
+  ion-toolbar h1{
+    margin-top:0px;
+    font-size:55px;
+  }
+
+  ion-card.preview{
+    margin-top: 50px;
+    --background:#F2F2F2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 350px;
+    border:0px;
+  }
+
+  ion-card.preview2{
+    --background:#F2F2F2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 350px;
+    border:0px;
+  }
+
+  .center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  h2.title{
+    font-family: "roboto";
+    margin-top: 50px;
+    font-size: 28px;
+    font-weight: 600;
+    color: #2D4665;
+  }
+
+  ion-text,ion-avatar{
+    font-family: "Inter";
+  }
+
+  .subtitle{
+    font-family: "roboto";
+    margin-top: 10px;
+    float: left;
+    width: 100%;
+    margin-bottom: 15px;
+    line-height: 150%;
+    font-size: 16px;
+  }
+
+  .margin-left-10{
+    margin-left:10px;
+  }
+
+  .info-tag{
+    pointer-events:none;
+  }
+
+  .bottom-bar-preview{
+    width: 500px;
+    margin-left: -250px;
+    margin-top: -20px;
+  }
+
+  .bottom-bar-preview :host-context(ion-icon) svg{
+    fill:red;
+  }
+
+</style>
\ No newline at end of file
