diff --git a/src/.vuepress/components/MDI-Glasses.vue b/src/.vuepress/components/MDI-Glasses.vue
deleted file mode 100644
index 3d2e4e4c..00000000
--- a/src/.vuepress/components/MDI-Glasses.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-<svg class="material-icons mdi-glasses" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M2.997 10a.769.769 0 0 0-.59.245.768.768 0 0 0-.17.615l.498 2.992c.08.63.667 1.148 1.262 1.148h3c.638 0 1.36-.563 1.515-1.183l1.05-3.191a.544.544 0 0 0-.083-.44c-.093-.12-.264-.186-.482-.186h-6zm4 7h-3c-1.617 0-3.04-1.257-3.24-2.86l-.498-2.992c-.107-.845.132-1.642.649-2.227A2.78 2.78 0 0 1 2.997 8h6c.835 0 1.585.348 2.059.955.119.152.217.318.296.492.425-.09.866-.09 1.292 0 .078-.175.176-.34.295-.492.474-.607 1.224-.955 2.058-.955h6c.812 0 1.572.336 2.09.921a2.78 2.78 0 0 1 .654 2.188l-.51 3.071c-.195 1.564-1.618 2.82-3.233 2.82h-3c-1.562 0-3.079-1.186-3.456-2.699l-.899-2.714a1.11 1.11 0 0 0-1.294.001l-.917 2.785C10.074 15.815 8.556 17 6.997 17zm8-7c-.217 0-.388.066-.481.185-.094.12-.116.302-.064.513l1.01 3.048c.175.691.897 1.254 1.536 1.254h3c.595 0 1.181-.518 1.255-1.108l.51-3.071a.752.752 0 0 0-.176-.576.77.77 0 0 0-.59-.245h-6z"/></svg>
-</template>
-
-<style scoped>
-.mdi-glasses {
-	fill: #476582;
-	-webkit-transform: translateY(15%) !important;
-	-ms-transform: translateY(15%) !important;
-	transform: translateY(15%) !important;
-}
-</style>
diff --git a/src/.vuepress/components/MaterialIcon.vue b/src/.vuepress/components/MaterialIcon.vue
index 1524b8df..ee19267d 100644
--- a/src/.vuepress/components/MaterialIcon.vue
+++ b/src/.vuepress/components/MaterialIcon.vue
@@ -1,29 +1,51 @@
 <template>
-  <div class="material-holder">
-    <i class="material-icons">{{ iconName }}</i>
-  </div>
+	<div class="icon-holder">
+		<i v-if="legacy" class="legacy-material-icons mdi" v-bind:class="iconName"></i>
+		<i v-else class="material-icons">{{ iconName }}</i>
+	</div>
 </template>
 
 <script>
+/** 
+ * For material icon references use https://material.io/resources/icons/
+ * Code example: <MaterialIcon icon-name="android" />
+ * 
+ * For material icon references use http://materialdesignicons.com/
+ * Code example: <MaterialIcon icon-name="mdi-glasses" legacy />
+*/
 export default {
-  props: ['iconName']
+	props: {
+		legacy: {
+			type: Boolean,
+			default: false
+		},
+		iconName: {
+			type: String,
+			required: true
+		}
+	}
 }
 </script>
 
 <style scoped>
 @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+@import url("https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css");
 
-.material-holder {
-    color: #476582;
-    margin: 0;
-    font-size: 0.85em;
-    border-radius: 3px;
-    display: inline;
+.icon-holder {
+	color: #476582;
+	margin: 0;
+	font-size: 0.85em;
+	border-radius: 3px;
+	display: inline;
 }
 
 .material-icons {
-    font-size: 1.35em;
-    position: relative;
-    top: 0.2rem;
+	font-size: 1.35em;
+	position: relative;
+	top: 0.2rem;
+}
+
+.legacy-material-icons {
+	font-size: 1.35em;
 }
 </style>
diff --git a/src/help/guides/menus.md b/src/help/guides/menus.md
index f9dd38e8..4a69e9d0 100644
--- a/src/help/guides/menus.md
+++ b/src/help/guides/menus.md
@@ -10,7 +10,7 @@ lang: en-US
 
 ### [<MaterialIcon icon-name="update"/> Library updates](/help/guides/library-updates)
 
-### [<MDI-Glasses/> Recently read](/help/guides/recently-read)
+### [<MaterialIcon icon-name="mdi-glasses" legacy /> Recently read](/help/guides/recently-read)
 
 ### [<MaterialIcon icon-name="explore"/> Catalogues](/help/guides/catalogues)