Handle error when loading icon pack (#8753) (#8755)

* Handle error when loading icon pack

* Update

(cherry picked from commit 8fcebefa0b26deb8c9d63b68d4f4a1b1b10e65fe)

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/src/states/IconState.tsx

@@ -1,5 +1,7 @@
 import { create } from 'zustand';
 
+import { t } from '@lingui/macro';
+import { showNotification } from '@mantine/notifications';
 import { api } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { generateUrl } from '../functions/urls';
@@ -38,6 +40,7 @@ export const useIconState = create<IconState>()((set, get) => ({
 
     await Promise.all(
       packs.data.map(async (pack: any) => {
+        if (pack.prefix && pack.fonts) {
           const fontName = `inventree-icon-font-${pack.prefix}`;
           const src = Object.entries(pack.fonts as Record<string, string>)
             .map(
@@ -47,8 +50,19 @@ export const useIconState = create<IconState>()((set, get) => ({
           const font = new FontFace(fontName, `${src};`);
           await font.load();
           document.fonts.add(font);
-
           return font;
+        } else {
+          console.error(
+            "ERR: Icon package is missing 'prefix' or 'fonts' field"
+          );
+          showNotification({
+            title: t`Error`,
+            message: t`Error loading icon package from server`,
+            color: 'red'
+          });
+
+          return null;
+        }
       })
     );
 
@@ -56,7 +70,7 @@ export const useIconState = create<IconState>()((set, get) => ({
       hasLoaded: true,
       packages: packs.data,
       packagesMap: Object.fromEntries(
-        packs.data.map((pack: any) => [pack.prefix, pack])
+        packs.data?.map((pack: any) => [pack.prefix, pack])
       )
     });
   }