Add codicon support

mrubens · mrubens · commit 2b405bb4c7de · 2025-02-16T17:01:54.000-05:00
diff --git a/docs/advanced-usage/auto-approving-actions.md b/docs/advanced-usage/auto-approving-actions.md
@@ -27,7 +27,7 @@ At the top of the Auto-Approve Toolbar is a toggle to enable/disable auto-approv
 
 ## Advanced Configuration (Settings)
 
-You can also find these auto-approval options in the Roo Code settings panel (gear icon ⚙️ in the top right corner).  The settings panel provides the same functionality as the auto-approve menu, but in a different location.  The auto-approve menu is generally the quickest way to change these settings.
+You can also find these auto-approval options in the Roo Code settings panel (<Codicon name="gear" /> in the top right corner).  The settings panel provides the same functionality as the auto-approve menu, but in a different location.  The auto-approve menu is generally the quickest way to change these settings.
 
 ## Security Considerations
 
diff --git a/docs/advanced-usage/code-actions.md b/docs/advanced-usage/code-actions.md
@@ -61,7 +61,7 @@ Each code action gives you two options:
 
 You can customize the prompts used for each Code Action by modifying the "Support Prompts" in the **Prompts** tab.  This allows you to fine-tune the instructions given to the AI model and tailor the responses to your specific needs.
 
-1.  **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar.
+1.  **Open the Prompts Tab:** Click the <Codicon name="notebook" /> icon in the Roo Code top menu bar.
 2. **Find "Support Prompts":** You will see the support prompts, including "Enhance Prompt", "Explain Code", "Fix Code", and "Improve Code".
 3. **Edit the Prompts:**  Modify the text in the text area for the prompt you want to customize. You can use placeholders like `${filePath}` and `${selectedText}` to include information about the current file and selection.
 4. **Click "Done":** Save your changes.
diff --git a/docs/advanced-usage/custom-instructions.md b/docs/advanced-usage/custom-instructions.md
@@ -12,7 +12,7 @@ These instructions are added to every prompt, regardless of the active mode.  Th
 
 **How to set them:**
 
-1.  Open the Roo Code panel (rocket icon 🚀).
+1.  Open the Roo Code panel (<Codicon name="rocket" />).
 2.  Click the "Prompts" button in the top menu bar.
 3.  Find the "Custom Instructions for All Modes" section.
 4.  Enter your instructions in the text area.
@@ -24,7 +24,7 @@ These instructions are added only when a specific mode is active.  They allow yo
 
 **How to set them:**
 
-1.  Open the Roo Code panel (rocket icon 🚀).
+1.  Open the Roo Code panel (<Codicon name="rocket" />).
 2.  Click the "Prompts" button in the top menu bar.
 3.  Select the mode you want to customize from the dropdown.
 4.  Find the "Mode-specific Custom Instructions" section.
diff --git a/docs/advanced-usage/custom-modes.md b/docs/advanced-usage/custom-modes.md
@@ -33,7 +33,7 @@ Roo Code will guide you through the process.
 
 ### 2. Using the Prompts Tab
 
-1.  **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar.
+1.  **Open the Prompts Tab:** Click the <Codicon name="notebook" /> icon in the Roo Code top menu bar.
 2.  **Click "Create New Mode":**  Use the "+" button to add a new mode.
 3.  **Fill in the Fields:**  Enter the mode's name, role definition, custom instructions, and select the allowed tool groups.
 4.  **Click "Create Mode":**  Save your new mode.
@@ -55,8 +55,8 @@ Custom modes can be configured in two locations:
 
 To edit either configuration:
 
-1.  **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar.
-2.  **Open the Settings File:** Click the code icon (`<>`) in the top right corner of the "Prompts" tab.
+1.  **Open the Prompts Tab:** Click the <Codicon name="notebook" /> icon in the Roo Code top menu bar.
+2.  **Open the Settings File:** Click the <Codicon name="code" /> in the top right corner of the "Prompts" tab.
 3.  **Edit the JSON:** Add or modify mode configurations within the `customModes` array, following the format described below.
 4.  **Save the File:** Roo Code will automatically detect the changes.
 
diff --git a/docs/advanced-usage/enhance-prompt.md b/docs/advanced-usage/enhance-prompt.md
@@ -13,15 +13,15 @@ The "Enhance Prompt" feature in Roo Code helps you improve the quality and effec
 ## How to Use Enhance Prompt
 
 1.  **Type your initial prompt:**  Enter your request in the Roo Code chat input box as you normally would.  This can be a simple question, a complex task description, or anything in between.
-2.  **Click the ✨ (Sparkle) Icon:**  Instead of pressing Enter, click the sparkle icon located to the left of the chat input box.
+2.  **Click the <Codicon name="sparkle" /> Icon:**  Instead of pressing Enter, click the <Codicon name="sparkle" /> icon located to the left of the chat input box.
 3.  **Review the Enhanced Prompt:**  Roo Code will replace your original prompt with an enhanced version.  Review the enhanced prompt to make sure it accurately reflects your intent. You can further refine the enhanced prompt before sending.
-4.  **Send the Enhanced Prompt:**  Press Enter or click the Send icon (paper plane) to send the enhanced prompt to Roo Code.
+4.  **Send the Enhanced Prompt:**  Press Enter or click the Send icon (<Codicon name="send" />) to send the enhanced prompt to Roo Code.
 
 ## Customizing the Enhancement Process
 
 The "Enhance Prompt" feature uses a customizable prompt template.  You can modify this template to tailor the enhancement process to your specific needs.
 
-1.  **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar.
+1.  **Open the Prompts Tab:** Click the <Codicon name="notebook" /> icon in the Roo Code top menu bar.
 2.  **Select "ENHANCE" Tab:** You should see listed out support prompts, including "ENHANCE". Click on this tab.
 3.  **Edit the Prompt Template:** Modify the text in the "Prompt" field.
 
@@ -32,7 +32,7 @@ The default prompt template includes the placeholder `${userInput}`, which will
 The API configuration used for Enhance Prompt is, by default, the same one that is selected for Roo Code tasks,
 but it can be changed:
 
-1.  **Open the Prompts Tab:** Click the notebook icon in the Roo Code top menu bar.
+1.  **Open the Prompts Tab:** Click the <Codicon name="notebook" /> icon in the Roo Code top menu bar.
 2.  **Select "ENHANCE" Tab:** You should see an "API Configuration" dropdown
 3.  **Select an API Configuration:** Choose an existing configuration, and future Enhance Prompt requests will be sent to that configured provider/model.
 
diff --git a/docs/advanced-usage/experimental-features.md b/docs/advanced-usage/experimental-features.md
@@ -8,7 +8,7 @@ Roo Code includes experimental features that are still under development.  These
 
 To enable or disable experimental features:
 
-1.  Open the Roo Code settings (gear icon ⚙️ in the top right corner).
+1.  Open the Roo Code settings (<Codicon name="gear" /> icon in the top right corner).
 2.  Go to the "Advanced Settings" section.
 3.  Find the "Experimental Features" section.
 4.  Check or uncheck the boxes for the features you want to enable or disable.
diff --git a/docs/advanced-usage/local-models.md b/docs/advanced-usage/local-models.md
@@ -73,8 +73,8 @@ Roo Code currently supports two main local model providers:
       
 
 4.  **Configure Roo Code:**
-    *   Open the Roo Code sidebar (🚀 icon).
-    *   Click the settings gear icon (⚙️).
+    *   Open the Roo Code sidebar (<Codicon name="rocket" /> icon).
+    *   Click the settings gear icon (<Codicon name="gear" />).
     *   Select "ollama" as the API Provider.
     *   Enter the Model name from the previous step (e.g., `your_model_name`).
     *   (Optional) You can configure the base URL if you're running Ollama on a different machine. The default is `http://localhost:11434`.
@@ -89,8 +89,8 @@ Roo Code currently supports two main local model providers:
     *   Select your downloaded model.
     *   Click **"Start Server"**.
 4.  **Configure Roo Code:**
-    *   Open the Roo Code sidebar (🚀 icon).
-    *   Click the settings gear icon (⚙️).
+    *   Open the Roo Code sidebar (<Codicon name="rocket" /> icon).
+    *   Click the settings gear icon (<Codicon name="gear" />).
     *   Select "lmstudio" as the API Provider.
     *   Enter the Model ID.  This should be the name of the model file you loaded in LM Studio (e.g., `codellama-7b.Q4_0.gguf`).  LM Studio shows a list of "Currently loaded models" in its UI.
     *   (Optional) You can configure the base URL if you're running LM Studio on a different machine. The default is `http://localhost:1234`.
diff --git a/docs/advanced-usage/mcp.md b/docs/advanced-usage/mcp.md
@@ -11,7 +11,7 @@ The Model Context Protocol (MCP) is a standard for extending Roo Code's capabili
 
 ## MCP Server Status
 
-You can view and manage your MCP server connections by clicking the server icon in the top navigation bar.
+You can view and manage your MCP server connections by clicking the <Codicon name="server" /> icon in the top navigation bar.
 
 ## Finding and Installing MCP Servers
 
@@ -71,7 +71,7 @@ Roo Code provides two settings to control the use of MCP servers, to help you ma
 
 If you don't want to use MCP servers at all, you can disable them completely:
 
-1. Open the Roo Code Settings (gear icon ⚙️)
+1. Open the Roo Code Settings (<Codicon name="gear" />)
 2. Find the "Enable MCP Servers" setting
 3. Uncheck the box
 
@@ -83,7 +83,7 @@ Roo Code can be asked to assist in creating new MCP servers. This is a powerful
 
 To disable MCP server creation:
 
-1. Open the Roo Code Settings (gear icon ⚙️)
+1. Open the Roo Code Settings (<Codicon name="gear" />)
 2. Find the "Enable MCP Server Creation" setting
 3. Uncheck the box
 
diff --git a/docs/advanced-usage/model-temperature.md b/docs/advanced-usage/model-temperature.md
@@ -21,8 +21,8 @@ Different tasks benefit from different temperature settings.  For example:
 
 You can adjust the temperature in the Roo Code settings:
 
-1.  **Open the Roo Code Panel:** Click the Roo Code icon (🚀) in the VS Code Activity Bar.
-2.  **Open Settings:** Click the gear icon (⚙️) in the top right corner of the Roo Code panel.
+1.  **Open the Roo Code Panel:** Click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar.
+2.  **Open Settings:** Click the <Codicon name="gear" /> icon in the top right corner of the Roo Code panel.
 3.  **Find the Temperature Setting:** In the settings panel, you'll find a "Use custom temperature" setting within the API configuration section.
 4.  **Enter the Temperature Value:** Check the box and enter the temperature value you want to use. The range is typically from 0.0 to 1.0, but this may depend on the specific model and provider.
 
diff --git a/docs/advanced-usage/rate-limits-costs.md b/docs/advanced-usage/rate-limits-costs.md
@@ -29,7 +29,7 @@ To prevent accidental overuse of the API and to help you manage costs, Roo Code
 
 **How to configure:**
 
-1.  Open the Roo Code settings (gear icon ⚙️ in the top right corner).
+1.  Open the Roo Code settings (<Codicon name="rocket" /> icon in the top right corner).
 2.  Go to the "Advanced Settings" section.
 3.  Find the "Rate Limit (seconds)" setting.
 4.  Enter the desired delay in seconds.  A value of 0 disables rate limiting.
diff --git a/docs/basic-usage/the-chat-interface.md b/docs/basic-usage/the-chat-interface.md
@@ -1,6 +1,6 @@
 # The Chat Interface
 
-The Roo Code chat interface is your primary way of interacting with it. It's located in the Roo Code panel, which you can open by clicking the Roo Code icon (🚀) in the VS Code Activity Bar.
+The Roo Code chat interface is your primary way of interacting with it. It's located in the Roo Code panel, which you can open by clicking the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar.
 
 ## Components of the Chat Interface
 
diff --git a/docs/faq.md b/docs/faq.md
@@ -81,7 +81,7 @@ Yes, Roo Code supports running models locally using Ollama and LM Studio.  See [
 
 ### How do I start a new task?
 
-Open the Roo Code panel (rocket icon 🚀) and type your task in the chat box. Be clear and specific about what you want Roo Code to do. See [Typing Your Requests](basic-usage/typing-your-requests) for best practices.
+Open the Roo Code panel (<Codicon name="rocket" />) and type your task in the chat box. Be clear and specific about what you want Roo Code to do. See [Typing Your Requests](basic-usage/typing-your-requests) for best practices.
 
 ### What are modes in Roo Code?
 
diff --git a/docs/getting-started/connecting-api-provider.md b/docs/getting-started/connecting-api-provider.md
@@ -28,7 +28,7 @@ Choose one of these options and follow the instructions below to obtain an API k
 
 ## Configuring Roo Code in VS Code
 
-1.  **Open the Roo Code Sidebar:** Click the Roo Code icon (🚀) in the VS Code Activity Bar.  You should see the welcome screen.
+1.  **Open the Roo Code Sidebar:** Click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar.  You should see the welcome screen.
 
 2.  **Select your API Provider:** In the "API Provider" dropdown, choose your API provider.
 
diff --git a/docs/getting-started/installing.md b/docs/getting-started/installing.md
@@ -22,7 +22,7 @@ This is the easiest and recommended method for most users.
 4.  **Install:** Find "Roo Code" in the search results (by RooVeterinaryInc). Click the **Install** button.
 5.  **Reload (if required):**  VS Code may prompt you to reload.  If so, click the **Reload** button.
 
-Once installed, you'll see the Roo Code icon (a rocket 🚀) in the Activity Bar.  Click it to open the Roo Code panel.
+Once installed, you'll see the Roo Code icon (<Codicon name="rocket" />) in the Activity Bar.  Click it to open the Roo Code panel.
 
 ## 2. Installation from the Open VSX Registry
 
diff --git a/docs/getting-started/your-first-task.md b/docs/getting-started/your-first-task.md
@@ -8,7 +8,7 @@ Now that you've [configured your AI provider and model](./connecting-api-provide
 
 ## Step 1: Open the Roo Code Panel
 
-If the Roo Code panel isn't already visible, click the Roo Code icon (🚀) in the VS Code Activity Bar (the vertical bar on the side of the window). This will open the Roo Code chat interface.  If you don't see the icon, make sure the extension is installed and enabled.
+If the Roo Code panel isn't already visible, click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar (the vertical bar on the side of the window). This will open the Roo Code chat interface.  If you don't see the icon, make sure the extension is installed and enabled.
 
 ## Step 2: Type Your Task
 
@@ -22,7 +22,7 @@ You don't need to use any special commands or syntax at this point.  Just write
 
 ## Step 3: Send Your Task
 
-Press Enter, or click the Send icon (a paper plane) to the right of the input box.
+Press Enter, or click the Send icon (<Codicon name="send" />) to the right of the input box.
 
 ## Step 4: Review and Approve Actions
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@easyops-cn/docusaurus-search-local": "^0.48.5",
     "@mdx-js/react": "^3.0.0",
+    "@vscode/codicons": "^0.0.36",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
diff --git a/src/components/Codicon.tsx b/src/components/Codicon.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import '@vscode/codicons/dist/codicon.css';
+
+interface CodiconProps {
+  name: string;
+}
+
+export default function Codicon({ name }: CodiconProps): JSX.Element {
+  return (
+    <i 
+      className={`codicon codicon-${name}`}
+      aria-hidden="true"
+    />
+  );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -83,3 +83,9 @@
   line-height: 1.4;
   max-height: 2.8em; /* 2 lines * 1.4 line-height */
 }
+
+/* Basic Codicon styles */
+.codicon {
+  vertical-align: middle;
+  line-height: 1;
+}
diff --git a/src/theme/MDXComponents.ts b/src/theme/MDXComponents.ts
@@ -0,0 +1,7 @@
+import MDXComponents from '@theme-original/MDXComponents';
+import Codicon from '@site/src/components/Codicon';
+
+export default {
+  ...MDXComponents,
+  Codicon,
+};
