如何在 Web 组件中使用 Material 设计图标？

Question

mdi 似乎无法在 Web 组件内部运行，还是我遗漏了什么？

我想开发一个封装其依赖的web组件，在父文档中添加link是可行的，但它违背了初衷。

<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

Answer 1

您要使用的字体的 @font-face CSS at 规则必须在主文档中声明，而不是在 Shadow DOM.

中声明

因为在你的情况下它是在 materialdesignicons.min.css 文件中定义的，你需要通过全局 <link> 将它加载到主文档中.

请注意，由于浏览器的缓存，CSS 文件不会被加载两次。

或者，您可以根据 Web 组件的 DOM 添加它，或者您可以只声明 @font-face at 规则（从 materialdesignicons.css 文件).

这是一个运行示例：

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>

如何在 Web 组件中使用 Material 设计图标？

How to use Material Design Icons in a web component?

web-component

css-import

native-web-component

material-design-icons