material-icon

Build Google Material Design MDC Icon Button and attach to DOM.

The icon source can be an svg or an svg path.d attribute (@mdi/js).

The icon will be inserted into a Material Design MDC Icon Button (@material/icon-button) and appended to a root element passed to the constructor. Note: The MDC Icon Button can be used with <button> and <a> tags.

npm install ear-material-icon

JavaScript Instantiation

import {EARMaterialIcon} from 'ear-material-icon';
import {mdiDogSide} from "@mdi/js";

const el = document.querySelector(".icon-container");
const icon = new EARMaterialIcon(el, mdiDogSide);
icon.setTitle("Dog");
icon.setHref("dog.html");

Styles

@import "ear-material-icon/ear-material-icon";

HTML Structure

The following HTML will be generated.

For @mdi/js icon

<a|button class="mdc-icon-button"
 href="#"
 title="..."
 data-mdc-ripple-is-unbounded="true"
 <svg xmlns="http://www.w3.org/2000/svg"
   width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="{@mdi/js icon}"/>
 </svg>
</a|button>

For svg

<a|button class="mdc-icon-button"
  title="..."
  [type="button"]
  data-ear-href="#"
  data-mdc-ripple-is-unbounded="true"
  {svg}
</a|button>

Methods

Signature | Description --- | --- constructor(root:DOMElement, icon:String, tag:String) => void | root: element that will contain the icon, icon: the @mdi/js icon, optional type of icon - a or button. addClass(cssClass:String) => void | Add css class to the icon. attach(obj:Object) => void | Build icon and attach to DOM. obj is svg or path.d string. buldSvg(d:String) => void | Build svg incorporating @mdi/js path.d string. setAttribute(name:String, value: Object) => void | Set an attribute value on the icon container (<a> or <button>). setHref(url:String) => void | Set the href property of the icon container(<a> or <button>). setTarget(target:String) => void | Set the target attribute of the icon container (<a> or <button>). setTitle(title:String) => void | Set the title attribute of the icon container (<a> or <button>).

Related Packages

• Icon Buttons - Material Components for the Web
• Material Icons
• @mdi Material Design Icons
• @mdi icon list