iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
MUI Icon Preview lets you inspect icons from your project’s installed @mui/icons-material package without leaving VS Code. Its three documented workflows are hovering an imported icon, viewing SVGs in completion details, and using the MUI Icons: Search command to find and insert an icon.
What the MUI icon preview extension does
MUI Icon Preview reads icon source files from the current workspace and turns them into previews. It is not a separate catalog that works independently of your project: the package @mui/icons-material must be installed in the workspace you want to inspect. The extension’s Visual Studio Marketplace listing describes three ways to discover icons.
Hover over an imported icon
Hover over an imported MUI icon to see a 64 by 64 SVG preview. The popup also shows the icon’s name and an import statement, and provides a route to the MUI documentation. The extension author’s announcement uses Sync as an example of an icon you can recognize this way.
Inspect icons in completion details
The extension offers component-name completions in TypeScript, TypeScript React, JavaScript, and JavaScript React files. When you focus a suggestion, its SVG appears in VS Code’s suggestion details panel—not inside the completion row. The Marketplace listing notes that VS Code extensions cannot place arbitrary images directly in completion rows. If the details panel is collapsed, run VS Code’s Toggle Suggestion Details command to show it.
#1 Best Overall
Search from the Command Palette
Run MUI Icons: Search from the Command Palette to search icons available in the installed package. Selecting a result inserts an import and component usage, giving you code to start from rather than only a preview.
How to preview MUI icons in VS Code
Install the extension and its project prerequisite, then use the workflow that matches what you are doing:
- Check the project: make sure
@mui/icons-materialis installed in the workspace you want to inspect. - Install MUI Icon Preview: open the Marketplace listing and install the extension in VS Code.
- Open a supported source file: use a TypeScript, TSX, JavaScript, or JSX file in that workspace.
- Choose a discovery method: hover an imported icon, focus an icon component completion and view its details, or run MUI Icons: Search from the Command Palette.
Prerequisites and supported workspaces
The extension listing specifies VS Code 1.85 or newer, a file-system-backed workspace, and @mui/icons-material installed in the project. It lists TypeScript, TypeScript React, JavaScript, and JavaScript React as supported languages. Local, SSH, WSL, and Dev Container workspaces are supported when the package is installed in the workspace being inspected.
Free tools Windows power users keep installed
One-click scans. No signup required.
What icons are available depends on your project
MUI’s icons documentation says Google created over 2,100 official Material icons, with each SVG exported as a React component from @mui/icons-material. That is the collection figure in MUI’s documentation, not a guarantee that every icon is present in every installed package version. The extension previews icons it can read from your current workspace.
Rank #3
MUI says these icon components use its SvgIcon component and therefore have a peer dependency on @mui/material. Its documentation shows both direct per-icon imports, such as @mui/icons-material/AccessAlarm, and named imports from the package root; it describes direct imports as the safest approach for bundle size.
Filled is the default icon theme. MUI also documents Outlined, Rounded, Two-tone, and Sharp variants, with the theme name appended to the component name—for example, DeleteOutlined. When searching, use the component name for the variant you need.
Privacy and what the listing establishes
The Marketplace listing says the extension reads icon source files from the active workspace and converts them to SVG previews locally. It also says workspace content is not uploaded or sent to an external service and that the extension uses no network access. Those are the listing’s stated behaviors, not an independent security audit.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →When this workflow is useful
Use hover when you already have an icon import and want to identify it, completion details when choosing among component names while coding, or the search command when you want to browse and insert an icon directly. The author, Igor Bežanović, describes the motivation in his announcement: “I made this because I wanted a quicker way to recognize and explore MUI icons while coding.”
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
