use abbr as icon fallback

src/components/bookmarks/item.jsx

@@ -19,7 +19,7 @@ export default function Item({ bookmark }) {
           <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
             {bookmark.icon && 
               <div className="flex-shrink-0 w-5 h-5">
-                <ResolvedIcon icon={bookmark.icon} />
+                <ResolvedIcon icon={bookmark.icon} alt={bookmark.abbr} />
               </div>
             }
             {!bookmark.icon && bookmark.abbr}

src/components/resolvedicon.jsx

@@ -1,9 +1,9 @@
 import Image from "next/future/image";
 
-export default function ResolvedIcon({ icon, width = 32, height = 32 }) {
+export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "logo" }) {
   // direct or relative URLs
   if (icon.startsWith("http") || icon.startsWith("/")) {
-    return <Image src={`${icon}`} width={width} height={height} alt="logo" />;
+    return <Image src={`${icon}`} width={width} height={height} alt={alt} />;
   }
 
   // mdi- prefixed, material design icons
@@ -31,7 +31,7 @@ export default function ResolvedIcon({ icon, width = 32, height = 32 }) {
       src={`https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${iconName}.png`}
       width={width}
       height={height}
-      alt="logo"
+      alt={alt}
     />
   );
-}
+}