Angular Material GUI – Insert components and icon snippets effortlessly

A Visual Studio Code extension that makes working with Angular Material easier by providing a sidebar explorer for components & icons, with ready-to-use snippets and auto-managed imports.

“Save time by exploring Angular Material components and icons visually, with instant snippet insertion and auto import handling — no more manual imports.”

✨ Features

• 📂 Components Explorer – Browse Angular Material components, insert snippets directly into your .component.html.
• 🔍 Search components - Search components easily from the list.
• 📖 Resources - Navigate to respective component's overview, API, examples(material.angular.dev) by clicking the links.
• 🎨 Icons Explorer – Search and insert Material icons in one click.
• 🛠 Auto Imports – Automatically adds importStatement and updates imports[] for standalone components (Angular 15 → 20+ supported).
• 🔍 Project Checks
  • Detects if you are in an Angular project.
  • Detects if Angular Material is missing and suggests installation.
• ⚡ Angular Compatibility – Handles Angular 15 → Angular 20+ seamlessly. (only standalone components/projects are supported).

✨ Demos

Components snippet selection demo

Material icon selction demo

🚀 Usage

1. Open an Angular project with Angular Material installed.
2. Open the Activity Bar → Angular Material icon.
3. Expand Components or Icons.
4. Click on a component/icon → snippet will be inserted into the active .component.html.
5. The extension will automatically update the associated .component.ts with required imports.

⚙️ Requirements

• Angular 15 → 20+ (only standalone components)
• Below Angular 19, Should set "standalone: true" explicitly.
• Angular Material installed.