feat(web/context): allow displaying icons in context menu items

web/src/features/menu/ContextMenu.tsx

@@ -17,11 +17,13 @@ debugData<ContextMenuProps>([
         {
           title: "Example button",
           description: "Example button description",
+          icon: "inbox",
           image: "https://i.imgur.com/YAe7k17.jpeg",
           metadata: [{ label: "Value 1", value: 300 }],
         },
         {
           title: "Menu button",
+          icon: "bars",
           menu: "other_example_menu",
           description: "Takes you to another menu",
           metadata: ["It also has metadata support"],
@@ -29,6 +31,7 @@ debugData<ContextMenuProps>([
         {
           title: "Event button",
           description: "Open a menu and send event data",
+          icon: "check",
           arrow: true,
           event: "some_event",
           args: { value1: 300, value2: "Other value" },

web/src/features/menu/Item.tsx

@@ -9,6 +9,7 @@ import {
   Flex,
   Spacer,
   Image,
+  HStack,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Option, ContextMenuProps } from "../../interfaces/context";
@@ -55,6 +56,18 @@ const Item: React.FC<{
                   : clickContext(option[0])
               }
             >
+              {option[1]?.icon && (
+                <FontAwesomeIcon
+                  fixedWidth
+                  icon={option[1].icon}
+                  fontSize={20}
+                  style={{
+                    marginRight: 10,
+                    justifySelf: "center",
+                    color: option[1].iconColor,
+                  }}
+                />
+              )}
               <Box>
                 <Box paddingBottom={option[1].description ? 1 : 0}>
                   <Text w="100%" fontWeight="medium">

web/src/interfaces/context.ts

@@ -1,9 +1,13 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
 export interface Option {
   menu?: string;
   title?: string;
   description?: string;
   arrow?: boolean;
   image?: string;
+  icon?: IconProp;
+  iconColor?: string;
   metadata?:
     | string[]
     | { [key: string]: any }