import mdi in main.scss instead of drupal theme library

build/webpack.config.base.js

@@ -59,6 +59,16 @@ module.exports = {
         test: /\.(graphql|gql)$/,
         exclude: /node_modules/,
         loader: 'graphql-tag/loader'
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          }
+        }
       }
       // {
       //   test: /\.graphql?$/,
@@ -92,15 +102,6 @@ module.exports = {
       //       name: utils.assetsPath('media/[name].[hash:7].[ext]')
       //     }
       //   }
-      // }, {
-      //   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-      //   use: {
-      //     loader: 'url-loader',
-      //     options: {
-      //       limit: 10000,
-      //       name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-      //     }
-      //   }
       // }
       // {
       //   test: /\.css$/,

build/webpack.config.dev.js

@@ -12,21 +12,23 @@ module.exports = merge(baseConfig, {
       {
         test: /\.css$/,
         use: [
-          // process.env.NODE_ENV !== 'production'
-          //   ? 'vue-style-loader'
-          //   : MiniCssExtractPlugin.loader,
-          MiniCssExtractPlugin.loader,
-          // 'vue-style-loader',
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '',
+            },
+          },
           'css-loader'
         ]
       }, {
         test: /\.scss$/,
         use: [
-          // process.env.NODE_ENV !== 'production'
-          //   ? 'vue-style-loader'
-          //   : MiniCssExtractPlugin.loader,
-          MiniCssExtractPlugin.loader,
-          // 'vue-style-loader',
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '',
+            },
+          },
           'css-loader',
           'sass-loader'
         ]

build/webpack.config.prod.js

@@ -13,13 +13,23 @@ module.exports = merge(baseConfig, {
       {
         test: /\.css?$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '',
+            },
+          },
           'css-loader'
         ]
       }, {
         test: /\.scss?$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '',
+            },
+          },
           'css-loader',
           'sass-loader'
         ]

package-lock.json

@@ -7074,6 +7074,70 @@
         "flat-cache": "^2.0.1"
       }
     },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-vue": "^7.1.0",
     "eslint-plugin-vue-a11y": "0.0.31",
     "eslint-webpack-plugin": "^2.4.0",
+    "file-loader": "^6.2.0",
     "graphql": "^15.4.0",
     "graphql-tag": "^2.11.0",
     "lodash": "^4.17.20",

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1,3 +1,7 @@
+
+$mdi-font-path: './mdi/fonts/';
+@import './mdi/scss/materialdesignicons';
+
 @import './base/variables';
 @import './base/colors';
 @import './base/reset';
@@ -7,11 +11,22 @@
 @import './base/fonts';
 @import './base/responsive';
 
-
 html{
   // background-color: red;
 }
 
+@mixin iconMDI($name) {
+	&::before {
+    content: mdi($name);
+    display: inline-block;
+    font: normal normal normal #{$mdi-font-size-base}/1 '#{$mdi-font-name}'; // shortening font declaration
+    font-size: inherit; // can't have font-size inherit on line above, so need to override
+    text-rendering: auto; // optimizelegibility throws things off #1094
+    line-height: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+	}
+}
 
 aside.messages{
   border:none;
@@ -335,6 +350,7 @@ header[role="banner"]{
 
   #block-languageswitcher{
     text-align: right;
+    position: relative;
     h2{
       margin: 0.1em 0 0 0;
       font-size: 0.756em;
@@ -345,8 +361,16 @@ header[role="banner"]{
       color: #fff;
       display: inline-block;
       vertical-align: top;
+
+      @include iconMDI('translate');
+      width:12px;
+      height:15px;
+      overflow: hidden;
     }
     &>ul.links{
+      position: absolute;
+      top:17px;
+      right:0;
       // background-color: #fff;
       overflow: hidden;
       width:3.5em;

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -3,7 +3,7 @@ global-css:
   css:
     theme:
       assets/fonts/ubuntu/ubuntu.css: {}
-      assets/styles/mdi/css/materialdesignicons.min.css: {}
+      # assets/styles/mdi/css/materialdesignicons.min.css: {}
       assets/dist/main.css: {}
 
 global-js: