mwc-icon 0.7.1不渲染(使用/pwa-starter-kit)？

Question

有没有人使用mwc-icon (0.7.1)来使用lit-element (pwa-starter-kit)？

mwc-button渲染正常，但mwc-icon不渲染图标，只渲染图标索引文本。

import { html } from 'lit-element';
import { PageViewElement } from './page-view-element.js';
import {Icon} from "@material/mwc-icon" //does not work
import {Button} from "@material/mwc-button"

import { SharedStyles } from './shared-styles.js';

class MyView1 extends PageViewElement {
  static get styles() {
    return [
      SharedStyles
    ];
  }

  render() {
    return html`
      <section>
        <h2>Example</h2>
        <mwc-icon>bookmark</mwc-icon>
        <mwc-button outlined label="outlined"></mwc-button>
    `;
  }
}

window.customElements.define('my-view1', MyView1);

Answer 1

我想你遇到了和我一样的问题。

这是因为Chrome只在第一次加载页面时处理@font-face属性一次。

当您导入mwc样式时，您希望它们在页面第一次初始加载后在lit element呈现中启用。这样就可以了，您将看到除了@-face属性之外的新样式。

这就是为什么你看不到图标的原因。

一种快速的解决方法是将链接添加到index.html 中的head部分和lit-element中的。

您可以看到example that don't work和example that work

不同之处在于index.html head部分中添加了链接。

更多详细信息请访问：github thread

希望我能帮到你。我自己被困了很长一段时间