Awesome Open Source
Awesome Open Source

Material Design Icons Intellisense

Visual Studio Marketplace Downloads Visual Studio Marketplace Installs Visual Studio Marketplace Version


Logo

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

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

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

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

Explorer

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

Configuration

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

Search

Lint

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,371
material-design (643
vscode-extension (246
preview (50
google-material (23

Find Open Source By Browsing 7,000 Topics Across 59 Categories