NoneMwc -icon 0.7.1 не рендерится (с lit-element/pwa-starter-kit)?

Question

Есть ли у кого-нибудь mwc-icon (0.7.1) для работы с lit-element (pwa-starter-kit)?

mwc-button отображает OK, но 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, вы ожидаете, что они будут включены в рендере светового элемента - после первой начальной загрузки страницы. это будет работать, вы увидите новые стили, за исключением атрибута @font-face.

Вот почему вы не видите значок.

Быстрый обходной путь - добавить ссылку как в раздел заголовка в index.html, так и в освещенный элемент, как вы это сделали.

вы можете увидеть пример, который не работает, и пример, который работает

Отличие заключается в добавленной ссылке в разделе заголовка index.html.

---

Подробнее здесь: поток github

Надеюсь, я помог тебе с этим. Я сам довольно долго застревал