diff --git a/frontend/src/core/components/tools/automate/iconMap.tsx b/frontend/src/core/components/tools/automate/iconMap.tsx
index f79976ed9..9dcb64f53 100644
--- a/frontend/src/core/components/tools/automate/iconMap.tsx
+++ b/frontend/src/core/components/tools/automate/iconMap.tsx
@@ -1,65 +1,65 @@
+import React from 'react';
import LocalIcon from '@app/components/shared/LocalIcon';
-// Icon wrapper components
-const SettingsIcon = (props: any) => ;
-const CompressIcon = (props: any) => ;
-const SwapHorizIcon = (props: any) => ;
-const CleaningServicesIcon = (props: any) => ;
-const CropIcon = (props: any) => ;
-const TextFieldsIcon = (props: any) => ;
-const PictureAsPdfIcon = (props: any) => ;
-const EditIcon = (props: any) => ;
-const DeleteIcon = (props: any) => ;
-const FolderIcon = (props: any) => ;
-const CloudIcon = (props: any) => ;
-const StorageIcon = (props: any) => ;
-const SearchIcon = (props: any) => ;
-const DownloadIcon = (props: any) => ;
-const UploadIcon = (props: any) => ;
-const PlayArrowIcon = (props: any) => ;
-const RotateLeftIcon = (props: any) => ;
-const RotateRightIcon = (props: any) => ;
-const VisibilityIcon = (props: any) => ;
-const ContentCutIcon = (props: any) => ;
-const ContentCopyIcon = (props: any) => ;
-const WorkIcon = (props: any) => ;
-const BuildIcon = (props: any) => ;
-const AutoAwesomeIcon = (props: any) => ;
-const SmartToyIcon = (props: any) => ;
-const CheckIcon = (props: any) => ;
-const SecurityIcon = (props: any) => ;
-const StarIcon = (props: any) => ;
+// Type for the props that our icon wrapper components accept
+interface IconWrapperProps {
+ width?: string | number;
+ height?: string | number;
+ style?: React.CSSProperties;
+ className?: string;
+}
-export const iconMap = {
- SettingsIcon,
- CompressIcon,
- SwapHorizIcon,
- CleaningServicesIcon,
- CropIcon,
- TextFieldsIcon,
- PictureAsPdfIcon,
- EditIcon,
- DeleteIcon,
- FolderIcon,
- CloudIcon,
- StorageIcon,
- SearchIcon,
- DownloadIcon,
- UploadIcon,
- PlayArrowIcon,
- RotateLeftIcon,
- RotateRightIcon,
- VisibilityIcon,
- ContentCutIcon,
- ContentCopyIcon,
- WorkIcon,
- BuildIcon,
- AutoAwesomeIcon,
- SmartToyIcon,
- CheckIcon,
- SecurityIcon,
- StarIcon
-};
+// Type for an icon wrapper component
+type IconWrapperComponent = React.FC;
+
+// Icon configuration: maps component names to Material Symbols icon names
+const iconConfig = {
+ SettingsIcon: 'settings-rounded',
+ CompressIcon: 'compress-rounded',
+ SwapHorizIcon: 'swap-horiz-rounded',
+ CleaningServicesIcon: 'cleaning-services-rounded',
+ CropIcon: 'crop-rounded',
+ TextFieldsIcon: 'text-fields-rounded',
+ PictureAsPdfIcon: 'picture-as-pdf-rounded',
+ EditIcon: 'edit-rounded',
+ DeleteIcon: 'delete-rounded',
+ FolderIcon: 'folder-rounded',
+ CloudIcon: 'cloud',
+ StorageIcon: 'storage-rounded',
+ SearchIcon: 'search-rounded',
+ DownloadIcon: 'download-rounded',
+ UploadIcon: 'upload-rounded',
+ PlayArrowIcon: 'play-arrow-rounded',
+ RotateLeftIcon: 'rotate-left-rounded',
+ RotateRightIcon: 'rotate-right-rounded',
+ VisibilityIcon: 'visibility-rounded',
+ ContentCutIcon: 'content-cut-rounded',
+ ContentCopyIcon: 'content-copy-rounded',
+ WorkIcon: 'work',
+ BuildIcon: 'build-rounded',
+ AutoAwesomeIcon: 'auto-awesome-rounded',
+ SmartToyIcon: 'smart-toy-rounded',
+ CheckIcon: 'check-rounded',
+ SecurityIcon: 'security-rounded',
+ StarIcon: 'star-rounded',
+} as const;
+
+// Factory function to create icon wrapper components
+function createIconComponent(iconName: string): IconWrapperComponent {
+ return (props: IconWrapperProps) => (
+
+ );
+}
+
+// Generate the icon map from the configuration
+export const iconMap: Record =
+ Object.entries(iconConfig).reduce(
+ (acc, [key, iconName]) => {
+ acc[key as keyof typeof iconConfig] = createIconComponent(iconName);
+ return acc;
+ },
+ {} as Record
+ );
export const iconOptions = [
{ value: 'SettingsIcon', label: 'Settings' },
@@ -89,7 +89,7 @@ export const iconOptions = [
{ value: 'SmartToyIcon', label: 'Robot' },
{ value: 'CheckIcon', label: 'Check' },
{ value: 'SecurityIcon', label: 'Security' },
- { value: 'StarIcon', label: 'Star' }
-];
+ { value: 'StarIcon', label: 'Star' },
+] as const;
-export type IconKey = keyof typeof iconMap;
\ No newline at end of file
+export type IconKey = keyof typeof iconMap;