Adding MDI Icons, icon-parameter in .yaml needs to be like \'mdi mdi-cube\'

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",

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>
             ))}
 

src/styles/globals.css

@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url("@mdi/font/css/materialdesignicons.css");
+
+
 #__next {
   width: 100%;
   height: 100%;