Material Design Icons Intellisense

Provides intellisense, search and hover preview of Material Design Icons.

Features

• Suggest icon names after typing mdi, mdi- or mdi: (can be changed)
• Display info about an icon when hovering
• Display icon preview as decoration
• Highlight unknown icon names
• Browse icons by category
• Fuzzy search icons
• Switch between different versions of MDI

Intellisense

• materialdesigniconsIntellisense.iconColor: RGB color of the preview icon.
• materialdesigniconsIntellisense.iconSize: Size of the preview icon in pixels.
• materialdesigniconsIntellisense.selector: Languages where completion and hover are active. Languages can be set through the MDI: Select languages command.
• materialdesigniconsIntellisense.includeAliases: Also include icon aliases in completion items.
• materialdesigniconsIntellisense.matchers: Customize how icon names are matched and inserted. See FAQ.

Hover

• materialdesigniconsIntellisense.iconColor: RGB color of the preview icon.
• materialdesigniconsIntellisense.iconSize: Size of the preview icon in pixels.
• materialdesigniconsIntellisense.selector: Languages where completion and hover are active.

Decoration

• materialdesigniconsIntellisense.iconColor: RGB color of the preview icon.
• materialdesigniconsIntellisense.enableDecorations: Show decorations
• materialdesigniconsIntellisense.decoration.size: Set decoration width and height
• materialdesigniconsIntellisense.decoration.margin: Set decoration margin

Explorer

• materialdesigniconsIntellisense.iconColor: RGB color of the preview icon.
• materialdesigniconsIntellisense.insertStyle: Switch between kebab case, camel case and Home Assistant syntax.

Configuration

• materialdesigniconsIntellisense.mdiVersion: @mdi/svg version to use. This can either be latest or a specific version like 5.2.45.
• materialdesigniconsIntellisense.overrideFontPackagePath: (not recommended, use mdiVersion instead) Override the path to the @mdi/svg package. To use a global installation, set this to <global npm root>/@mdi/svg where <global npm root> is the output of npm root -g

Search

Lint

• materialdesigniconsIntellisense.enableLinter: Lint Home Assistant and kebab case icon names
• materialdesigniconsIntellisense.ignoredIcons: Icons ignored by the linter

FAQ

The preview doesn't show up in intellisense

The intellisense preview can be toggled with Ctrl + Space by default. You can also find the shortcut via Preferences: Open Keyboard Shortcuts and searching for toggleSuggestionDetails.

Should I use the webfont?

This extension provides intellisense for both @mdi/font and @mdi/js. Due to the size of the webfont, you should consider using @mdi/js instead (read this guide for further information).

How to add support for other libraries?

You can add custom matchers to materialdesigniconsIntellisense.matchers. Create an issue or add a pull request if your matcher should be available to other people.

{
    "match": "\\bmdi:{param}\\b", // regex for hover, decoration and completion, possible cases below
    "insert": "mdi:{param}", // insert from explorer
    "displayName": "kebab-case (web font)", // shown by `materialdesigniconsIntellisense.changeInsertStyle` command
    "name": "kebabCase", // any string, should be unique
    "insertPrefix": null, // optional, string inserted before `match`
    "insertSuffix": null, // optional, string inserted after icon name
}

You can also add prefixes/suffixes to existing entries. This example would allow you to insert <i class="mdi-alert"></i> by typing mdi-alEnter.

{
    "match": "\\bmdi-{param}\\b",
    "insert": "mdi-{param}",
    "displayName": "kebab-case (web font)",
    "name": "kebabCase",
    "insertPrefix": "<i class=\"",
    "insertSuffix": "\"></i>"
}

Cases:

• {camel} accessPoint
• {param} access-point
• {pascal} AccessPoint
• {constant} ACCESS_POINT
• {dot} access.point
• {header} Access-Point
• {no} access point
• {path} access/point
• {snake} access_point

Changelog

CHANGELOG.md