diff --git a/frontend/src/components/shared/LocalIcon.tsx b/frontend/src/components/shared/LocalIcon.tsx
index d3330d9c0..c00ccefec 100644
--- a/frontend/src/components/shared/LocalIcon.tsx
+++ b/frontend/src/components/shared/LocalIcon.tsx
@@ -1,26 +1,21 @@
 import React from 'react';
 import { addCollection, Icon } from '@iconify/react';
+import iconSet from '../../assets/material-symbols-icons.json';
 
-// Try to load icons at import time
+// Load icons synchronously at import time - guaranteed to be ready on first render
 let iconsLoaded = false;
 let localIconCount = 0;
 
-// Use a simple try/catch for the icon loading
-(async () => {
-  try {
-    const iconModule = await import('../../assets/material-symbols-icons.json');
-    const iconSet = iconModule.default || iconModule;
-    if (iconSet) {
-      addCollection(iconSet);
-      iconsLoaded = true;
-      localIconCount = Object.keys(iconSet.icons || {}).length;
-      console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
-    }
-  } catch (error) {
-    // Silently fail - icons will fallback to CDN
-    console.info('ℹ️  Local icons not available - using CDN fallback');
+try {
+  if (iconSet) {
+    addCollection(iconSet);
+    iconsLoaded = true;
+    localIconCount = Object.keys(iconSet.icons || {}).length;
+    console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
   }
-})();
+} catch (error) {
+  console.info('ℹ️  Local icons not available - using CDN fallback');
+}
 
 interface LocalIconProps {
   icon: string;
diff --git a/frontend/src/components/tools/shared/ToolStep.tsx b/frontend/src/components/tools/shared/ToolStep.tsx
index c28625cfb..9d86d2f03 100644
--- a/frontend/src/components/tools/shared/ToolStep.tsx
+++ b/frontend/src/components/tools/shared/ToolStep.tsx
@@ -1,8 +1,6 @@
 import React, { createContext, useContext, useMemo, useRef } from 'react';
 import { Text, Stack, Box, Flex, Divider } from '@mantine/core';
 import LocalIcon from '../../shared/LocalIcon';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Tooltip } from '../../shared/Tooltip';
 import { TooltipTip } from '../../../types/tips';
 import { createFilesToolStep, FilesToolStepProps } from './FilesToolStep';
@@ -124,14 +122,12 @@ const ToolStep = ({
         </Flex>
 
         {isCollapsed ? (
-          <ChevronRightIcon style={{
-            fontSize: '1.2rem',
+          <LocalIcon icon="chevron-right-rounded" width="1.2rem" height="1.2rem" style={{
             color: 'var(--mantine-color-dimmed)',
             opacity: onCollapsedClick ? 1 : 0.5
           }} />
         ) : (
-          <ExpandMoreIcon style={{
-            fontSize: '1.2rem',
+          <LocalIcon icon="expand-more-rounded" width="1.2rem" height="1.2rem" style={{
             color: 'var(--mantine-color-dimmed)',
             opacity: onCollapsedClick ? 1 : 0.5
           }} />