How to use Material Design Icons in a web componen

2020-04-21 07:16发布

站内问答 / 前沿技术
1418 1 6

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

1条回答
够拽才男人
2楼-- · 2020-04-21 08:00

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)