Material icon not displayed inside a paper-icon-button (Polymer)

Question

I'm using Polymer for a project and i just want to display a hamburger menu. The issue is that i can see the clickable zone but the hamburger menu is not displayed. This is my code :

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">

<dom-module id="my-view3">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <paper-icon-button icon="menu"></paper-icon-button>

  </template>

  <script>
    class MyView3 extends Polymer.Element {
      static get is() { return 'my-view3'; }
    }

    window.customElements.define(MyView3.is, MyView3);
  </script>
</dom-module>

Sorry for my English, i'm French.

Answer 1

paper-icon-button only takes care of the button styles and behaviour, but doesn't have the SVG icons itself.

In order to be able to use the Google Material icons, you have to import the Iron Icons element first.

You have to install it via Bower (if you don't have it already):

bower install --save iron-icons

Then you have to import it in the component where you want to use the icons.

<link rel="import" href="../bower_components/iron-icons/iron-icons.html">