Add material icons as font faces (#95)

* Add icons as font faces

* Update MaterialIcon.vue

* Fix requested changes

package-lock.json

@@ -868,6 +868,11 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.7.tgz",
       "integrity": "sha512-YCw2Q2m4fxzyFsPOH3uDYMoJztTD+pT+AAyse4LFpbdrBg+r8ueaVT8BFnXEjrGwMDJJeXrwJ5AOC6q/JWBI4w=="
     },
+    "@mdi/font": {
+      "version": "4.5.95",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-4.5.95.tgz",
+      "integrity": "sha512-AjR2Zgu1feBXWlTfEjD6JQqLAMCqYn2Gzia5PWqFnysvz5F6JmPHtQFldIHXqyv2s/FwME7ZDBc5N86NEHbyvQ=="
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -6273,6 +6278,11 @@
       "integrity": "sha512-TAIHTHPwa9+ltKvKPWulm/beozQU41Ab+FIefRaQV1NRnpzwcV9QOe6wXQS5WLivm5Q/nlo0rl6laGkMDZE7Gw==",
       "dev": true
     },
+    "material-design-icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
+      "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -21,10 +21,12 @@
 		"@fortawesome/fontawesome-svg-core": "^1.2.25",
 		"@fortawesome/free-solid-svg-icons": "^5.11.2",
 		"@fortawesome/vue-fontawesome": "^0.1.7",
+		"@mdi/font": "^4.5.95",
 		"axios": "^0.19.0",
 		"iso-639-1": "^2.1.0",
 		"lodash.groupby": "^4.6.0",
 		"lodash.sortby": "^4.7.0",
+		"material-design-icons": "^3.0.1",
 		"vue-agile": "^1.0.11",
 		"vuepress-plugin-clean-urls": "^1.0.3",
 		"vuepress-plugin-container": "^2.0.2"

src/.vuepress/components/MaterialIcon.vue

@@ -33,7 +33,6 @@ export default {
 
 <style scoped>
 .material-holder {
-	font-family: 'Material Design Icons', 'Material Icons', sans-serif;
 	color: #476582;
 	margin: 0;
 	font-size: 0.85em;
@@ -42,12 +41,26 @@ export default {
 }
 
 .material-icons {
+	font-family: 'Material Icons';
 	font-size: 1.35em;
+	font-style: normal;
 	position: relative;
 	top: 0.2rem;
+	font-weight: normal;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+	-webkit-font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
 }
 
 .material-legacy-icons {
+	font-family: 'Material Design Icons';
 	font-size: 1.35em;
+	font-style: normal;
 }
 </style>

src/.vuepress/config.js

@@ -3,11 +3,8 @@ module.exports = {
 	description: 'Free and open source manga reader for Android.',
 	dest: './public',
 	head: [
-		['link', { rel: "preconnect", href: 'https://cdn.materialdesignicons.com/', crossorigin:""} , ''],
 		['link', { rel: "preconnect", href: 'https://fonts.gstatic.com', crossorigin:""} , ''],
-		['link', { rel: "stylesheet", href: 'https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css', crossorigin:""} , ''],
 		['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/css?family=Open+Sans'} , ''],
-		['link', { rel: "stylesheet", href: 'https://fonts.googleapis.com/icon?family=Material+Icons'} , '']
 	],
 	themeConfig: {
 		repo: 'inorichi/tachiyomi',

src/.vuepress/enhanceApp.js

@@ -1,4 +1,5 @@
 import './styles/index.scss';
+import './styles/fonts.scss'
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';

src/.vuepress/styles/fonts.scss

@@ -0,0 +1,22 @@
+@font-face {
+	font-family: "Material Icons";
+	font-style: normal;
+	font-weight: 400;
+	src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot");
+	src: local('Material Icons'), 
+		 local('MaterialIcons-Regular'),
+		 url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"),
+		 url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format("woff"),
+		 url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype"),
+		 url("~material-design-icons/iconfont/MaterialIcons-Regular.svg#MaterialIcons-Regular") format("svg");
+}
+
+@font-face {
+	font-family: "Material Design Icons";
+	src: url("~@mdi/font/fonts/materialdesignicons-webfont.eot");
+	src: local('Material Design Icons'), 
+		 local('Material-Design-Icons'),
+		 url("~@mdi/font/fonts/materialdesignicons-webfont.woff2") format("woff2"),
+		 url("~@mdi/font/fonts/materialdesignicons-webfont.woff") format("woff"),
+		 url("~@mdi/font/fonts/materialdesignicons-webfont.ttf") format("truetype");
+}