chore(ui): create QIcon stylesheet files

rstoenescu · rstoenescu · commit ef72e93eebac · 2020-01-15T10:59:52.000+02:00
diff --git a/ui/dev/app.js b/ui/dev/app.js
@@ -20,6 +20,9 @@ import '../src/css/index.sass'
 import './app.styl'
 // import iconSet from '../icon-set/fontawesomeV5'
 
+import '@quasar/extras/roboto-font/roboto-font.css'
+
+import '@quasar/extras/material-icons/material-icons.css'
 import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
 import '@quasar/extras/mdi-v4/mdi-v4.css'
 import '@quasar/extras/ionicons-v4/ionicons-v4.css'
diff --git a/ui/dev/spa.index.html b/ui/dev/spa.index.html
@@ -9,7 +9,6 @@
     <base href="/">
     <title>Quasar Development</title>
     <link rel="icon" href="https://cdn.quasar.dev/img/quasar-logo.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Material+Icons&Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css">
   </head>
   <body class="demo-site">
diff --git a/ui/dev/ssr.index.html b/ui/dev/ssr.index.html
@@ -10,7 +10,6 @@
     <base href="{{ baseHref }}">
     <title>Quasar Development</title>
     <link rel="icon" href="https://cdn.quasar.dev/img/quasar-logo.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Material+Icons&Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css">
   </head>
   <body class="demo-site {{ Q_BODY_CLASSES }}" {{ Q_BODY_ATTRS}}>
diff --git a/ui/src/components/icon/QIcon.sass b/ui/src/components/icon/QIcon.sass
@@ -1,4 +1,5 @@
 .q-icon
+  overflow: hidden
   line-height: 1
   width: 1em
   height: 1em
@@ -10,9 +11,6 @@
   text-align: center
   position: relative
 
-  font-display: block // flash of invisible text until the font loads
-                     // https://font-display.glitch.me/
-
   fill: currentColor // for svg paths
 
   &:before
@@ -38,4 +36,3 @@
   align-items: center
   justify-content: center
   vertical-align: middle
-
diff --git a/ui/src/components/icon/QIcon.styl b/ui/src/components/icon/QIcon.styl
@@ -1,4 +1,5 @@
 .q-icon
+  overflow: hidden
   line-height: 1
   width: 1em
   height: 1em
@@ -10,9 +11,6 @@
   text-align: center
   position: relative
 
-  font-display: block // flash of invisible text until the font loads
-                     // https://font-display.glitch.me/
-
   fill: currentColor // for svg paths
 
   &:before
diff --git a/ui/src/css/index.sass b/ui/src/css/index.sass
@@ -1,6 +1,7 @@
 @import './variables.sass'
 @import './normalize.sass'
-@import './critical.sass'
+
+@import '../components/icon/QIcon.sass'
 
 /* Mixins */
 @import '../mixins/panel.sass'
diff --git a/ui/src/css/index.styl b/ui/src/css/index.styl
@@ -1,6 +1,7 @@
 @import './variables.styl'
 @import './normalize.styl'
-@import './critical.styl'
+
+@import '../components/icon/QIcon.styl'
 
 /* Mixins */
 @import '../mixins/panel.styl'
