MUI Icons in VS Code: Find & Preview

You can find and preview MUI (Material-UI) icons directly inside VS Code using the built-in IntelliSense for import statements and a dedicated extension that shows icon previews in the editor. This article explains the fastest methods, how to set them up, and how to avoid common pitfalls.

Why Preview Icons in the Editor?

When you’re building a React app with MUI, you often need to pick the right icon for a button, menu item, or empty state. The official MUI icon set contains over 2,000 icons, and remembering exact names like AddCircleOutline vs AddCircle is error-prone. Previewing icons inside VS Code saves you from switching to the browser or the MUI documentation every few minutes, keeping your flow uninterrupted.

Method 1: Use the MUI Icons Extension

The most direct way is to install a VS Code extension that adds icon previews. Search the Extensions view (Ctrl+Shift+X) for “MUI Icons” or “Material Icon Preview”. A popular choice is Material Icon Preview by Jacobo Escobar, which adds a hover preview and autocomplete for MUI icon imports. After installing, open a JavaScript or TypeScript file, type import and start typing an icon name—you’ll see a dropdown with matching icons and a small preview of each. The extension reads the icon names from the installed @mui/icons-material package, so it works offline once the package is in your project.

Method 2: IntelliSense Without Extensions

Even without any extension, VS Code’s TypeScript language server can help. If you have @mui/icons-material installed, start typing import { Add } from '@mui/icons-material'—IntelliSense will list all exported icon components. The limitation is that you only see the name, not the visual preview. To get a preview, you can hover over the imported icon in your code and VS Code will show the component’s type info, but not the actual SVG. For a visual preview, you need an extension or a custom snippet.

Method 3: Custom Snippets and Quick Previews

If you prefer not to install an extension, you can create your own user snippets that insert the icon component with a comment showing the icon name. For example, add a snippet like this to your javascriptreact.json or typescriptreact.json:

"AddCircle": {
  "prefix": "mui-add-circle",
  "body": ["<AddCircle /> // 🟢 Add circle icon"],
  "description": "MUI AddCircle icon"
}

This doesn’t show the actual SVG, but it gives you a visual cue (emoji) and the exact component name. For a true preview, you can use the “Preview” feature of the vscode-material-icon-theme (which changes file icons, not component icons) or rely on the extension from Method 1.

How the Preview Extension Works

Extensions like Material Icon Preview work by parsing the @mui/icons-material package’s type definitions. They read the list of exported components and map each name to an SVG path. When you type in an import statement, the extension intercepts the completion list and adds a small inline image (the icon) next to the name. This is possible because MUI icons are just React components that render SVG paths; the extension can extract those paths from the package source. The preview appears in the suggestion widget and sometimes on hover. The extension is open-source and doesn’t send your code anywhere—it runs locally.

Common Problems and Fixes

• No suggestions appear: Make sure @mui/icons-material is installed in your project (run npm install @mui/icons-material). If you’re using a monorepo, install it in the package where your code lives.
• Preview shows a blank box: This usually means the extension can’t find the icon’s SVG path. Try updating the extension or reinstalling it. Also ensure your VS Code is up to date.
• IntelliSense is slow: Large icon sets can slow down completions. You can disable the extension for large workspaces or use a snippet-based approach instead.
• Icons don’t match the MUI version: If you’re using MUI v4 vs v5, icon names may differ slightly. The extension generally supports both, but check the extension’s documentation for version compatibility.

Choosing the Right Approach

For most developers, the dedicated extension is the best balance of convenience and functionality. It requires a one-time install and gives you instant visual feedback. If you’re in a restricted environment where you can’t install extensions, IntelliSense plus a quick reference to the MUI docs (or a local cheat sheet) is a workable alternative. For teams that want consistency, creating a shared snippet file (via a workspace snippet) can help everyone use the same icon names without memorizing them.

Alternatives to In-Editor Preview

• MUI’s official documentation has a searchable icon list with previews. You can keep it open in a browser tab.
• Icon search websites like Material Icons by Google allow you to search and copy the component name.
• VS Code’s built-in “Go to Definition” (F12) on an icon import will open the icon’s source file, where you can see the SVG path—but not a rendered preview.
• Storybook or a local component library can render all icons in a grid, but that’s a heavier setup.

Frequently Asked Questions

Does the extension work with MUI v5? Yes, the Material Icon Preview extension supports MUI v5 icons. It reads the package’s exports, which are the same in v4 and v5 for most icons.

Can I preview icons without installing the package? No, the extension relies on the @mui/icons-material package being installed in your project. Without it, there are no icon names to suggest.

Is there a keyboard shortcut to preview an icon? The preview appears automatically in the suggestion list. There’s no separate shortcut needed—just type the import and the preview shows up.

Can I use this with TypeScript? Yes, it works with both JavaScript and TypeScript files. The extension uses the same language server.

What if I see a warning about “unresolved import”? This usually means the package isn’t installed or the path is wrong. Check your node_modules and ensure your import path is correct (e.g., @mui/icons-material/Add for direct imports).

In summary, the quickest way to find and preview MUI icons without leaving VS Code is to install a dedicated extension like Material Icon Preview. It gives you visual suggestions as you type, works offline, and integrates seamlessly with your existing React/TypeScript setup. For those who prefer no extensions, IntelliSense plus a browser tab is a reliable fallback.

Related

• Palworld Electric Pals: Where to Find Them
• Boat Anchor Types Compared: Which Fits Your Boat?
• Arc Raiders: Find the A6 Scanner Fast