Create LegacyMaterialIcon.vue (#76)

* Create LegacyMaterialIcon.vue

* Add style

* Add legacy icons to MaterialIcon

* Change indentation

* Remove MDI-Glasses

src/.vuepress/components/MDI-Glasses.vue

@@ -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>

src/.vuepress/components/MaterialIcon.vue

@@ -1,19 +1,37 @@
 <template>
-  <div class="material-holder">
+	<div class="icon-holder">
-    <i class="material-icons">{{ iconName }}</i>
+		<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 {
+.icon-holder {
 	color: #476582;
 	margin: 0;
 	font-size: 0.85em;
@@ -26,4 +44,8 @@ export default {
 	position: relative;
 	top: 0.2rem;
 }
+
+.legacy-material-icons {
+	font-size: 1.35em;
+}
 </style>

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)