Use settings layout for group icon

src/components/services/group.jsx

@@ -13,11 +13,12 @@ export default function ServicesGroup({ services, layout }) {
         "flex-1 p-1"
       )}
     >
-      <div className="flex select-none">
-      {services.icon &&
-        <Image src={resolveIcon(services.icon)} width={32} height={32} alt="logo" className="flex-shrink-0 flex items-center justify-center w-10"/>
+      <div className="flex select-none items-center">
+      {layout?.icon &&
+        <Image src={resolveIcon(layout.icon)} width={32} height={32} alt="logo" className="flex-shrink-0 mr-2 w-7 h-7"/>
       }
-        <h2 className={services.icon ? "text-theme-800 dark:text-theme-300 text-xl font-medium flex-1 flex items-center justify-between rounded-r-md flex-1 px-2 py-2 text-sm text-left" : "text-theme-800 dark:text-theme-300 text-xl font-medium h2-title-noicon"}>{services.name}</h2>
+        <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}
+        </h2>
       </div>
       <List services={services.services} layout={layout} />
     </div>

src/utils/config/api-response.js

@@ -74,7 +74,6 @@ export async function servicesResponse() {
 
     const mergedGroup = {
       name: groupName,
-      icon: configuredGroup.icon,
       services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service),
     };