[SOLVED] How to use Material Design Icons in a web component?

How to use Material Design Icons in a web component?

Looks like that mdi is not working inside web components, or do I miss something?

I want to develop a web component that encapsulates it's dependencies, adding the link to the parent document works, but it violates the original intent.

<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
  "x-webcomponent",
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = `
        <style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
        <span class="mdi mdi-home"></span>
      `;
    }
  }
);
</script>
</body>
</html>

https://codepen.io/Jamesgt/pen/MWwvJaw

Solution

The @font-face CSS at-rule for the font you want to use must be declared in the main document, not in the Shadow DOM.

Because in your case it is defined in the materialdesignicons.min.css file, you'll need to load it in the main document via a global <link>.

Note that the CSS file won't be loaded twice thanks to the browser's cache.

Alternately, you could add it in the light DOM of the web component, or you could just declare the @font-face at-rule (copied from the materialdesignicons.css file).

Here is a running example:

customElements.define( "x-webcomponent", class extends HTMLElement {
    constructor() {
      super()
      this.attachShadow({ mode: "open" })
      this.shadowRoot.innerHTML = `
        <link rel=stylesheet  href=https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css>
        <span class="mdi mdi-home"></span>`
    }
    connectedCallback () {
      this.innerHTML = `<style>
          @font-face {
            font-family: "Material Design Icons";
            src: url("https://cdn.materialdesignicons.com/4.9.95/fonts/materialdesignicons-webfont.woff?v=4.9.95") format("woff");
          }
       </style>`
    }
} )

<x-webcomponent></x-webcomponent>