1

Has any one got mwc-icon (0.7.1) to work with lit-element (pwa-starter-kit)?

mwc-button renders OK but mwc-icon does not render the icon just the icon index text.

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);
Steve
  • 476
  • 3
  • 10

1 Answers1

2

I think you encounter the same problem I did.

It happens because Chrome process the @font-face attribute only once at first page load.

when you import the mwc styles you expect them to enable in the lit-element render - after the first initial load of the page. that will work, you'll see the new styles except for the @font-face attribute.

That's why you don't see the icon.

A quick workaround is to append the link both on the head section in index.html and in the lit-element as you did.

you can see example that don't work and example that work

The difference is the added link in index.html head section.

More details here: github thread

Hope I helped you with this. I was stuck on it myself for quite some time

Rotem Grimberg
  • 91
  • 4