Google Material Symbols Helper

Search, preview, autocomplete, copy and insert Google Material Symbols without leaving Visual Studio Code.

Google Material Symbols Helper is developed and maintained by Angelito Systems S.A.C., a software and AI solutions company that builds apps, business systems, web platforms, automation workflows and AI-powered tools for entrepreneurs, startups, SMEs and growing companies.

• Project repository: https://github.com/angelitosystems/Google-Material-Symbols-Helper
• Official Google Material Symbols library: https://fonts.google.com/icons
• Official Google Material Symbols documentation: https://developers.google.com/fonts/docs/material_symbols
• Official Google Material Design Icons repository: https://github.com/google/material-design-icons

About Angelito Systems S.A.C.

Angelito Systems S.A.C. creates practical digital solutions for entrepreneurs, businesses and organizations that want to improve, automate and scale their operations.

We design and build:

• Mobile apps.
• Web platforms.
• Business systems.
• Admin dashboards.
• Automation tools.
• AI-assisted workflows.
• Custom software for real-world business needs.

This extension is part of our developer productivity toolkit: small, useful tools created to speed up everyday development workflows and help teams build faster with better consistency.

Features

Sidebar — always-on icon browser

Open the Google Symbols panel in the Activity Bar to browse, filter and insert icons at any time. The sidebar loads thousands of Material Symbols with instant search, style controls, Fill and Weight controls, and a one-click Insert CDN button that injects the correct <link> or @import into the active file.

Supported styles:

• Outlined
• Rounded
• Sharp

Full-screen gallery

Run Google Material Symbols: Open Gallery from the Command Palette to open a large, searchable icon grid. This is useful when you want to explore icon names visually before inserting one into your project.

Intelligent autocomplete

Use the ms- prefix to quickly insert icons with IntelliSense.

Examples:

ms-home
ms-search
ms-dashboard
ms-settings
ms-shopping_cart

The extension inserts framework-aware snippets in supported files.

HTML, Angular, Vue, Blade and PHP:

<span class="material-symbols-outlined" aria-hidden="true">home</span>

React, JSX and TSX:

<span className="material-symbols-outlined" aria-hidden="true">home</span>

With Tailwind support enabled:

<span class="material-symbols-outlined text-[22px] text-slate-600 dark:text-slate-300" aria-hidden="true">home</span>

Live editor previews

• Hover Preview — hover any Material Symbol icon name in your code to see a visual preview, the icon name, style and copy-ready HTML/React snippets.
• Gutter Icons — small icon previews can appear beside line numbers so you can scan your markup faster.

One-click CDN import

Right-click inside an HTML, CSS, JSX, Vue or PHP file and choose:

Google Material Symbols: Import CDN by Style

The extension can:

• Detect the current framework or file type.
• Insert a <link> tag in HTML, Angular, Vue, Blade and PHP files.
• Insert a full @import + CSS class block in CSS, SCSS and Less files.
• Offer clipboard copy or CSS import options in React files.
• Support optimized imports using icon_names.
• Detect duplicate imports before inserting again.

Insert from anywhere

Every icon card exposes quick actions:

Installation

Search Google Material Symbols Helper in the VS Code Extension Marketplace and click Install, or run:

ext install angelitosystems.google-material-symbols-helper

Usage

Sidebar

1. Click the Google Symbols icon in the Activity Bar.
2. Use the search box to find an icon by name or keyword.
3. Adjust Style, Fill and Weight to preview variations.
4. Click Insert to place the icon at your cursor.
5. Use Insert CDN to add the Google Fonts import to the active file.

Gallery

Open the Command Palette:

Ctrl + Shift + P

Run:

Google Material Symbols: Open Gallery

Autocomplete

In any supported file, type:

ms-home

Then select the suggestion from IntelliSense. If suggestions do not appear automatically, press:

Ctrl + Space

Context menu CDN import

Right-click in the editor and run:

Google Material Symbols: Import CDN by Style

Choose the style: Outlined, Rounded or Sharp.

Settings

Example settings.json:

{
  "googleMaterialSymbols.defaultStyle": "rounded",
  "googleMaterialSymbols.defaultFill": 1,
  "googleMaterialSymbols.defaultWeight": 300,
  "googleMaterialSymbols.useTailwindClasses": true,
  "googleMaterialSymbols.enableHoverPreview": true,
  "googleMaterialSymbols.enableGutterPreview": true
}

Supported languages

Commands

Development

Install dependencies:

npm install

Generate icon data:

npm run generate:icons

Compile:

npm run compile

Run locally:

Press F5 in VS Code

Package as VSIX:

npm run package

Package metadata recommendation

For Marketplace and GitHub visibility, your package.json should include metadata similar to this:

{
  "publisher": "angelitosystems",
  "author": {
    "name": "Angelito Systems S.A.C.",
    "url": "https://github.com/angelitosystems"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/angelitosystems/Google-Material-Symbols-Helper.git"
  },
  "bugs": {
    "url": "https://github.com/angelitosystems/Google-Material-Symbols-Helper/issues"
  },
  "homepage": "https://github.com/angelitosystems/Google-Material-Symbols-Helper#readme"
}

Brand, ownership and attribution

Google Material Symbols Helper is an open-source Visual Studio Code extension developed and maintained by Angelito Systems S.A.C.

Angelito Systems S.A.C. provides software, mobile apps, business systems, automation and AI-powered digital solutions for entrepreneurs, companies and organizations.

Google Material Symbols attribution

Material Symbols and Material Design Icons are created by Google.

Useful official links:

• Google Material Symbols library: https://fonts.google.com/icons
• Google Material Symbols documentation: https://developers.google.com/fonts/docs/material_symbols
• Google Material Design Icons repository: https://github.com/google/material-design-icons
• Google Material Design Icons license: https://github.com/google/material-design-icons/blob/master/LICENSE

Google Material Symbols / Material Design Icons are made available by Google under the Apache License 2.0. This extension only helps developers search, preview and insert those icons inside Visual Studio Code.

This extension is not an official Google product. It is not affiliated with, sponsored by, endorsed by or maintained by Google.

License

Extension source code: MIT License © 2026 Angelito Systems S.A.C.

Google Material Symbols / Material Design Icons: created by Google and distributed under their respective Google / Apache License 2.0 terms.

See LICENSE and THIRD_PARTY_NOTICES.md for details.