import mdi in main.scss instead of drupal theme library

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;