mtrl-icon Custom Element

Material Icons Version: v31

Vanilla custom element that displays Google Material icons in your page.

• Installation
• Usage
• Known Issues, Potential Gotchas
• Legal

Installation

To install, run:

npm i mtrl-icon

Then, either import the file directly with:

<script src="path/to/node_modules/mtrl-icon/src/mtrl-icon.js" defer></script>

or, include it in your webpack (or similar) build:

import "mtrl-icon";

Usage

Once installed, simply use with:

<mtrl-icon name="done"></mtrl-icon>

Where the name attribute is any valid Material icon name. See here for a list of icons.

Known Issues, Potential Gotchas

• The Material icon font face is loaded from the Google Fonts CDN. It is currently not possible to load a local instance of the Material set. Please open an issue if you need this feature.
• Due to a potential bug, the @font-face for Material Icons is elevated to the global CSS scope. See this article by Rob Dodson for more information.

Legal

Material Icons by Google - (License Information)