javascript - Material 图标未显示在纸质图标按钮内( polymer )

Question

我正在为一个项目使用 Polymer，我只想显示一个汉堡菜单。问题是我可以看到可点击区域，但未显示汉堡菜单。这是我的代码:

<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>

对不起我的英语，我是法国人。

Answer 1

paper-icon-button 只处理按钮样式和行为，但本身没有 SVG 图标。

为了能够使用 Google Material 图标，您必须导入 Iron Icons元素优先。

您必须通过 Bower 安装它(如果您还没有):

bower install --save iron-icons

然后你必须在你想要使用图标的组件中导入它。

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