added first icons

card.html

@@ -196,17 +196,20 @@ <h1>Phone</h1>
 
                 // Iterate over the contacts and display
                 contactData.contacts.forEach(contact => {
-                    if (contact.display) {
+                    if (contact.display && contact.value) {
                         const item = document.createElement('div');
                         item.classList.add("row");
 
                         const button = document.createElement('a');
                         button.href = contact.link;
 
-                        const icon = document.createElement('div')
+                        // Create an img element for the icon
+                        const icon = document.createElement('img');
                         icon.classList.add("icon");
+                        icon.src = contact.icon;
+                        icon.alt = `${contact.contactType} icon`;
                         button.appendChild(icon);
-
+        
                         const name = document.createElement('h1')
                         name.textContent = contact.contactType;
                         button.appendChild(name);

cardAssets/contacts.json

@@ -4,37 +4,43 @@
         "contactType": "Website",
         "display": true,
         "value": "DanielRedacted.net",
-        "link": "https://DanielRedacted.net"
+        "link": "https://DanielRedacted.net",
+        "icon": "cardAssets/icons/website.svg"
       },
       {
         "contactType": "Email",
         "display": true,
         "value": "[email protected]",
-        "link": "mailto:[email protected]"
+        "link": "mailto:[email protected]",
+        "icon": "cardAssets/icons/mail.svg"
       },
       {
         "contactType": "Phone",
         "display": true,
         "value": "+1-000-000-0000",
-        "link": "tel:+10000000000"
+        "link": "tel:+10000000000",
+        "icon": "cardAssets/icons/phone.svg"
       },
       {
         "contactType": "LinkedIn",
         "display": true,
-        "value": "LinkedIn Profile",
-        "link": "https://www.linkedin.com/in/username"
+        "value": "",
+        "link": "https://www.linkedin.com/in/username",
+        "icon": ""
       },
       {
         "contactType": "X",
         "display": true,
         "value": "@DanielRedacted",
-        "link": "https://x.com/DanielRedacted"
+        "link": "https://x.com/DanielRedacted",
+        "icon": ""
       },
       {
         "contactType": "Instagram",
         "display": true,
         "value": "@DanielRedacted",
-        "link": "https://www.instagram.com/DanielRedacted"
+        "link": "https://www.instagram.com/DanielRedacted",
+        "icon": ""
       }
     ]
   }