(chore): ensure preloading of icons works correctly

angular.json

@@ -21,7 +21,6 @@
             "styles": [
               "node_modules/material-design-lite/dist/material.blue_grey-amber.min.css",
               "node_modules/plyr/dist/plyr.css",
-              "node_modules/material-design-icons/iconfont/material-icons.css",
               "src/main.css"
             ],
             "scripts": [

src/index.html

@@ -26,13 +26,7 @@
     />
     <link
       rel="preload"
-      href="https://cdn-assets.minds.com/front/fonts/material-icons.css"
-      as="style"
-      crossorigin
-    />
-    <link
-      rel="preload"
-      href="https://cdn-assets.minds.com/front/fonts/material-icons.woff2"
+      href="https://cdn-assets.minds.com/front/fonts/MaterialIcons-Regular.woff2"
       as="font"
       type="font/woff2"
       crossorigin

src/stylesheets/fonts.scss

@@ -398,7 +398,7 @@
   font-weight: 900;
   font-display: swap;
   src: local('Roboto Black'), local('Roboto-Black'),
-    url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmYUtfChc4AMP6lbBP.woff2)
+    url('<%= APP_CDN %>/assets/fonts/roboto/bold-latin-ext.woff2')
       format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
     U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
@@ -410,9 +410,51 @@
   font-weight: 900;
   font-display: swap;
   src: local('Roboto Black'), local('Roboto-Black'),
-    url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmYUtfBBc4AMP6lQ.woff2)
+    url('<%= APP_CDN %>/assets/fonts/roboto/bold-latin-ext.woff2')
       format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
+
+/**
+ * NOTE: these are not relative to app path as we need preloading of the icons
+ */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url('https://cdn-assets.minds.com/front/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
+  src: local('Material Icons'), local('MaterialIcons-Regular'),
+    url('https://cdn-assets.minds.com/front/fonts/MaterialIcons-Regular.woff2')
+      format('woff2'),
+    url('https://cdn-assets.minds.com/front/fonts/MaterialIcons-Regular.woff')
+      format('woff'),
+    url('https://cdn-assets.minds.com/front/fonts/MaterialIcons-Regular.ttf')
+      format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}