const template = document.createElement('template');

template.innerHTML = `
  <style>
    :host {
      display: inline-block;
      direction: ltr;
      font-family: var(--mdc-icon-font, 'Material Icons');
      font-feature-settings: 'liga';
      font-size: var(--mdc-icon-size, 24px);
      font-style: normal;
      font-weight: normal;
      letter-spacing: normal;
      line-height: 1;
      text-rendering: optimizeLegibility;
      text-transform: none;
      white-space: nowrap;
      word-wrap: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
  <slot></slot>
`;

class MaterialIconElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).appendChild(
      template.content.cloneNode(true)
    );
  }
}

if (!customElements.get('mwc-icon')) {
  customElements.define('mwc-icon', MaterialIconElement);
}