From ec5261cce58b7ee84f1fa6afa54a52738b81bfae Mon Sep 17 00:00:00 2001
From: Ivan Kolodyazhny <e0ne@e0ne.info>
Date: Fri, 22 May 2020 13:02:46 +0300
Subject: [PATCH] Fix Material theme to work with any combination of pyScss and
 MDI icons

':before' class doesn't work as expected with current versions of
xstatic-mdi and PyScss. It's a temporary workaround with copy ':before'
styles from MDI directly into the Material theme.

Closes-Bug: #1771559
Co-Authored-By: Akihiro Motoki <amotoki@gmail.com>
Change-Id: I969ad70065c580ba90bb0a050c7a9cf242d805ec
(cherry picked from commit f3bfa383417b270fce384fee18c5cb470cec15f7)
---
 .../themes/material/static/horizon/_icons.scss              | 3 +++
 .../material/static/horizon/components/_checkboxes.scss     | 2 ++
 .../static/horizon/components/_context_selection.scss       | 6 +++++-
 .../material/static/horizon/components/_datepicker.scss     | 4 ++++
 .../themes/material/static/horizon/components/_navbar.scss  | 6 +++++-
 .../material/static/horizon/components/_radiobuttons.scss   | 2 ++
 .../material/static/horizon/components/_spinners.scss       | 6 ++++++
 7 files changed, 27 insertions(+), 2 deletions(-)

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 {