Use ApiIcon for plugin panels (#8496)

- Richer set of icons available
- Allows plugin to define their own icon

src/frontend/src/components/items/ApiIcon.tsx

@@ -11,8 +11,13 @@ export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
   const icon = useIconState(
     (s) => s.packagesMap[iconPackage]?.icons[name]?.variants[variant]
   );
+
   const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';
 
+  if (!unicode) {
+    console.warn(`ApiIcon not found: ${_name}`);
+  }
+
   return (
     <i
       className={classes.icon}

src/frontend/src/hooks/UsePluginPanels.tsx

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { api } from '../App';
+import { ApiIcon } from '../components/items/ApiIcon';
 import type { PanelType } from '../components/panels/Panel';
 import {
   type InvenTreeContext,
@@ -15,7 +16,6 @@ import {
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import type { ModelType } from '../enums/ModelType';
 import { identifierString } from '../functions/conversion';
-import { InvenTreeIcon, type InvenTreeIconType } from '../functions/icons';
 import { apiUrl } from '../states/ApiState';
 import { useGlobalSettingsState } from '../states/SettingsState';
 
@@ -89,7 +89,7 @@ export function usePluginPanels({
   const pluginPanels: PanelType[] = useMemo(() => {
     return (
       pluginData?.map((props: PluginUIFeature) => {
-        const iconName: string = props?.icon || 'plugin';
+        const iconName: string = props?.icon || 'ti:plug:outline';
         const identifier = identifierString(
           `${props.plugin_name}-${props.key}`
         );
@@ -102,7 +102,7 @@ export function usePluginPanels({
         return {
           name: identifier,
           label: props.title,
-          icon: <InvenTreeIcon icon={iconName as InvenTreeIconType} />,
+          icon: <ApiIcon name={iconName} />,
           content: (
             <PluginPanelContent
               pluginFeature={props}