diff --git a/openstack_dashboard/themes/material/static/horizon/_icons.scss b/openstack_dashboard/themes/material/static/horizon/_icons.scss
index 2509ae4783..7f331d6a2d 100644
--- a/openstack_dashboard/themes/material/static/horizon/_icons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_icons.scss
@@ -86,6 +86,9 @@ $icon-swap: (
 
 @each $fa-icon, $mdi-icon in $icon-swap {
   .fa-#{$fa-icon} {
+    &:before {
+      content: unquote("\"\\#{map-get($mdi-icons, $mdi-icon)}\"");
+    }
     @extend .mdi-#{$mdi-icon};
   }
 }
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss b/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
index 585bc4a215..6ccf2ac27a 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_checkboxes.scss
@@ -12,6 +12,7 @@
 
       &:before {
         @extend .mdi;
+        content: "\F131";
         font-size: $font-size-h5;
       }
     }
@@ -21,6 +22,7 @@
       @extend .mdi-checkbox-marked;
 
       &:before {
+        content: "\F132";
         color: $brand-primary;
       }
     }
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_context_selection.scss b/openstack_dashboard/themes/material/static/horizon/components/_context_selection.scss
index d94cfd16c9..c0fe9b611e 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_context_selection.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_context_selection.scss
@@ -2,4 +2,8 @@
   @extend .mdi-stop;
   color: $gray-light;
   font-size: $font-size-small;
-}
\ No newline at end of file
+
+  &:before {
+    content: "\F4DB";
+  }
+}
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss b/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss
index d967c72a06..4e28b8abdd 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_datepicker.scss
@@ -3,6 +3,10 @@
   @extend .mdi-arrow-right;
   padding-right: $padding-base-horizontal;
 
+  &:before {
+    content: "\F054";
+  }
+
   &-text {
     display: none;
   }
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss b/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
index d94cfd16c9..c0fe9b611e 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_navbar.scss
@@ -2,4 +2,8 @@
   @extend .mdi-stop;
   color: $gray-light;
   font-size: $font-size-small;
-}
\ No newline at end of file
+
+  &:before {
+    content: "\F4DB";
+  }
+}
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss b/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss
index 6769911c33..b1ea3e79d1 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_radiobuttons.scss
@@ -15,6 +15,7 @@
         font-size: $font-size-h5;
         line-height: $font-size-h5;
         vertical-align: middle;
+        content: "\F43D";
       }
     }
 
@@ -24,6 +25,7 @@
 
       &:before {
         color: $brand-primary;
+        content: "\F43E";
       }
     }
   }
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_spinners.scss b/openstack_dashboard/themes/material/static/horizon/components/_spinners.scss
index a5b5f725d5..6fbca1e292 100644
--- a/openstack_dashboard/themes/material/static/horizon/components/_spinners.scss
+++ b/openstack_dashboard/themes/material/static/horizon/components/_spinners.scss
@@ -20,11 +20,17 @@
 
     .hz-spinner-icon-up {
       @extend .mdi-plus;
+      &:before {
+        content: "\F415";
+      }
     }
 
     .hz-spinner-icon-down {
       @extend .mdi-minus;
       padding-right: $padding-xs-horizontal;
+      &:before {
+        content: "\F374";
+      }
     }
 
     &-container {