Material Icons Intellisense for VS Code

Suggestions, Auto-complete & Preview of Material Icons or Material Symbols

Features

For HTML vanilla, React, Vue

<span class="material-symbols-outline">home</span>

The extension matches with span tag with any of the following classes:

• material-symbols-outlined
• material-symbols-rounded
• material-symbols-sharp
• material-icons
• material-icons-outlined
• material-icons-round
• material-icons-sharp
• material-icons-two-tone

For Angular

<mat-icon>home</mat-icon>

The extension matches with mat-icon. See Angular Material for more information.

Requirements

To use this extension, you need to have Material symbols or Material icons in your project. You can find more information about Material symbols here.

Extension Settings

material-icons-intellisense.version

This configuration allows you to select the version to use:

• 3 See Material Icons
• 4 See Material Symbols

{
  "material-icons-intellisense.version": "4"
}

material-icons-intellisense.preview.backgroundColor

Background color of the preview icon. Supports any valid CSS color value.

{
  "material-icons-intellisense.preview.backgroundColor": "#ffffff"
}

material-icons-intellisense.preview.foregroundColor

Foreground color of the preview icon. Supports any valid CSS color value.

{
  "material-icons-intellisense.preview.foregroundColor": "#000000"
}

material-icons-intellisense.preview.iconFill

Show icons with fill style in the preview.

{
  "material-icons-intellisense.preview.iconFill": true
}

Upcoming Features

Here are some of the upcoming features that will be added to Material Icons Intellisense:

• Inline decorator to preview icon
• Integration with other popular code editors
• Customizable html tag & class to match

Stay tuned for these exciting updates in future releases!