iron-icon does not work in Firefox

[nicolethenerd]

Description

The demo at https://www.webcomponents.org/element/@polymer/iron-icon/demo/demo/index.html does not run in Firefox.

Expected outcome

The demo works in Firefox.

Actual outcome

The icons do not appear.

Live Demo

https://www.webcomponents.org/element/@polymer/iron-icon/demo/demo/index.html

Not sure if this is an instance of bug #122 ? I don't see anything in the console on the demo, but when I try to use an iron-icon in my own project, I get that error in FF - not sure if this is the same issue or something else.

Browsers Affected

• [ ] Chrome
• [X] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[sunc9oa]

I got same issue when I use iron-icon element, it show Error: this._meta.byKey is not a function error message. I try to import iron-meta before iron-icon and the issue be solved, but I don't why.

import { LitElement, html, css } from 'lit-element'

// import iron-meta element before iron-icon
import '@polymer/iron-meta/iron-meta.js'
import '@polymer/iron-icon/iron-icon.js'
import '@polymer/iron-icons/iron-icons.js'

class AppShell extends LitElement {
  render() {
    return html`
      <iron-icon icon="menu"></iron-icon>
    `
  }
}
customElements.define('app-shell', AppShell)

Hope this help.

[NickdeK]

If you use the git repo instead of the npm repo in your package.json it also solves the problem. I think the authors just need to make a new release to solve this.