Replace Font-Awesome & Icomoon with Google Font

cms/templates/partials/faculty-carousel.html

@@ -11,7 +11,7 @@ <h3>{{ page.subhead }}</h3>
       {% for member in page.members %}
         <div class="slide">
           <div class="slide-holder">
-            <img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}" loading="lazy">
+            <img src="{% image_version_url member.value.image "fill-300x300" %}" alt="{{ member.value.name }}">
             <h2>{{ member.value.name }}</h2>
             <div class="text-holder">
               {{ member.value.description|richtext }}

cms/templates/partials/testimonial-carousel.html

@@ -31,7 +31,7 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
           <div class="modal-body">
             <div class="container no-gutters px-0">
               <div class="d-flex flex-row-reverse">
-                <a class="text-dark" href="testimonial-{{ forloop.counter }}" data-dismiss="modal"><span class="icon-close-outline" aria-hidden="true"></span></a>
+                <a class="text-dark" href="testimonial-{{ forloop.counter }}" data-dismiss="modal"><span class="material-icons" data-icon="cancel" aria-hidden="true"></span></a>
               </div>
             </div>
             <div class="container px-4">

mitxpro/templates/base.html

@@ -15,8 +15,6 @@
           media="all" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
           media="none" onload="if(media!='all') media='all'">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"
-          media="none" onload="if(media!='all') media='all'"/>
     <script type="text/javascript">
     var SETTINGS = {{ js_settings_json|safe }};
     {% if CSOURCE_PAYLOAD %}

static/scss/catalog/body.scss

@@ -209,11 +209,13 @@ h1, h2, h3, h4, h5 {
           padding: 0;
 
           a {
-
             &:after {
-              font-family: icomoon;
-              content: '\e901';
-              font-size: 12px;
+              font-family: Material Icons;
+              content: 'chevron_right';
+              font-size: 20px;
+              display: inline-block;
+              vertical-align: middle;
+              margin-left: -5px;
             }
           }
 

static/scss/detail/courses-in-program.scss

@@ -114,12 +114,15 @@
     color: $primary;
 
     &:after {
-      content: "\e902";
-      font-family: icomoon;
+      font-family: Material Icons;
+      content: "arrow_circle_up";
+      text-transform: none;
+      transform: rotate(90deg);
+      font-size: 20px;
       display: inline-block;
       vertical-align: top;
-      line-height: 24px;
-      margin: 0 0 0 10px;
+      line-height: 21px;
+      margin: 0 0 0 5px;
     }
   }
 }

static/scss/detail/faqs.scss

@@ -30,9 +30,11 @@
     font-weight: 600;
 
     &:after {
-      content: "\e902";
-      font-family: icomoon;
-      margin-left: 10px;
+      content: "arrow_circle_up";
+      font-family: Material Icons;
+      margin-left: 20px;
+      text-transform: none;
+      transform: rotate(90deg);
     }
   }
 

static/scss/detail/header.scss

@@ -3,6 +3,7 @@
   background-color: white;
   position: relative;
   z-index: 1;
+  height: 98px;
 }
 
 .header-block {

static/scss/detail/testimonial-carousel.scss

@@ -123,12 +123,14 @@
     text-transform: uppercase;
 
     &:after {
-      content: "\e902";
-      font-family: icomoon;
+      content: "arrow_circle_up";
+      font-family: Material Icons;
+      text-transform: none;
+      transform: rotate(90deg);
       display: inline-block;
       vertical-align: top;
-      line-height: 24px;
-      margin: 0 0 0 10px;
+      line-height: 21px;
+      margin: 0 0 0 5px;
     }
   }
 }
@@ -147,4 +149,8 @@
 .quote-container {
   max-height: 50vh;
   overflow: auto;
+}
+
+.material-icons:after {
+  content: attr(data-icon);
 }

static/scss/layout.scss

@@ -13,7 +13,6 @@
 @import "catalog/banner";
 @import "catalog/tabs";
 @import "checkout";
-@import "icomoon";
 @import "footer";
 @import "slick";
 @import "dashboard";

static/scss/notification.scss

@@ -65,8 +65,8 @@
     margin-right: 10px;
 
     &:after {
-      content: "\e906";
-      font-family: icomoon;
+      content: "cancel";
+      font-family: Material Icons;
       margin-left: 10px;
    }
  }

static/scss/resource.scss

@@ -77,9 +77,11 @@ html {
     text-decoration: none;
 
     &:after {
-      content: "\e905";
-      font-family: icomoon;
-      margin-left: 10px;
+      font-size: 24px;
+      font-family: Material Icons;
+      content: "arrow_circle_up";
+      margin-left: 5px;
+      vertical-align: middle;
     }
   }
 }

static/scss/slick.scss

@@ -121,6 +121,7 @@
   box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.1);
   margin: -75px 0 0;
   cursor: pointer;
+  padding: 0;
 
   @include media-breakpoint-up(md) {
     left: -25px;
@@ -153,16 +154,16 @@
   }
 
   &:after {
-    font-size: 25px;
+    font-size: 30px;
     line-height: 30px;
-    font-family: icomoon;
-    content: "\e900";
+    font-family: Material Icons;
+    content: "chevron_left";
     @include media-breakpoint-up(md) {
-      font-size: 22px;
+      font-size: 34px;
       line-height: 20px;
     }
     @media (min-width: 1275px) {
-      font-size: 30px;
+      font-size: 50px;
       line-height: 40px;
     }
   }
@@ -177,7 +178,7 @@
   }
 
   &:after {
-    content: "\e901";
+    content: "chevron_right";
   }
   @media (min-width: 1275px) {
     right: -65px;