icon can be passed in config

lib/networks.ts

@@ -27,7 +27,7 @@ const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGEleme
 export const NETWORKS: Array<Network> = (() => {
   try {
     const networksFromConfig: Array<Network> = JSON.parse(process.env.NEXT_PUBLIC_SUPPORTED_NETWORKS || '[]');
-    return networksFromConfig.map((network) => ({ ...network, icon: ICONS[`${ network.type }/${ network.subType }`] }));
+    return networksFromConfig.map((network) => ({ ...network, icon: network.icon || ICONS[`${ network.type }/${ network.subType }`] }));
   } catch (error) {
     return [];
   }
@@ -47,6 +47,7 @@ export const NETWORKS: Array<Network> = (() => {
 //     type: 'xdai',
 //     subType: 'optimism',
 //     group: 'mainnets',
+//     icon: 'https://www.fillmurray.com/60/60'
 //   },
 //   {
 //     name: 'Arbitrum on xDai',

types/networks.ts

@@ -8,6 +8,6 @@ export interface Network {
   type: string;
   subType: string;
   group: 'mainnets' | 'testnets' | 'other';
-  icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  icon?: FunctionComponent<SVGAttributes<SVGElement>> | string;
   isAccountSupported?: boolean;
 }

ui/navigation/networkMenu/NetworkMenuLink.tsx

-import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text, Image } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
@@ -36,6 +36,16 @@ const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAcc
   const hasIcon = Boolean(icon);
   const colors = useColors({ hasIcon });
 
+  const iconEl = typeof icon === 'string' ? (
+    <Image w="30px" h="30px" src={ icon } alt={ `${ type } ${ subType } network icon` }/>
+  ) : (
+    <Icon
+      as={ hasIcon ? icon : placeholderIcon }
+      boxSize="30px"
+      color={ isActive ? colors.icon.active : colors.icon.default }
+    />
+  );
+
   return (
     <Box as="li" listStyleType="none">
       <NextLink href={ href } passHref>
@@ -51,11 +61,7 @@ const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAcc
           bgColor={ isActive ? colors.bg.active : colors.bg.default }
           _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
         >
-          <Icon
-            as={ hasIcon ? icon : placeholderIcon }
-            boxSize="30px"
-            color={ isActive ? colors.icon.active : colors.icon.default }
-          />
+          { iconEl }
           <Text
             marginLeft={ 3 }
             fontWeight="500"