From aecca793755a8e8098b6a96359daf508f8256662 Mon Sep 17 00:00:00 2001
From: Simon R <dieideeistgut@users.noreply.github.com>
Date: Mon, 10 Oct 2022 21:57:29 +0200
Subject: [PATCH] Adding MDI Icons, icon-parameter in .yaml needs to be like
 \'mdi mdi-cube\'

---
 package.json                     |  1 +
 src/components/services/item.jsx | 12 ++++++++++--
 src/styles/globals.css           |  3 +++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 75d02e7f..c3ad5e33 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.2",
+    "@mdi/font": "^7.0.96",
     "classnames": "^2.3.2",
     "compare-versions": "^5.0.1",
     "dockerode": "^3.3.4",
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 870eb4f4..970c35fe 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -57,11 +57,19 @@ export default function Item({ service }) {
                 rel="noreferrer"
                 className="flex-shrink-0 flex items-center justify-center w-12 "
               >
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                {service.icon.startsWith("mdi") ? (
+                  <span class={service.icon + " scale-150"}></span>
+                ) : (
+                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                )}
               </a>
             ) : (
               <div className="flex-shrink-0 flex items-center justify-center w-12 ">
-                <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                {service.icon.startsWith("mdi") ? (
+                  <span class={service.icon + " scale-150"}></span>
+                ) : (
+                  <Image src={resolveIcon(service.icon)} width={32} height={32} alt="logo" />
+                )}
               </div>
             ))}
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c3779283..d31bca2e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url("@mdi/font/css/materialdesignicons.css");
+
+
 #__next {
   width: 100%;
   height: 100%;