Question

我有一个名为input-header的聚合物1.x元素，它看起来像这样

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="input-header">

  <template>

    <style>
      .dropdown-content {
        padding: 0px;
      }
    </style>

    <paper-toolbar>

      <paper-icon-button icon="mail"></paper-icon-button>
      <iron-icon icon="image:transform"></iron-icon>
      <div class="title">Left</div>

      <paper-menu-button horizontal-align="right" vertical-align="top">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <div class="title">Right</div>
      </paper-menu-button>
    </paper-toolbar>

  </template>

  <script>
    Polymer({

      is: 'input-header',

      properties: {

        label: {
          type: String,
          notify: true
        }

      }

    });
  </script>

</dom-module>

我已将它包含在我的index.html中，如下所示：

<body unresolved id="app">

   <input-header label="Left"></input-header>

</body>

但由于某种原因，纸质图标或铁图标不会显示在此处

Answer 1

更新： 查看此工作demo

您必须全局或在此特定元素中导入paper-icon-button，iron-icon和image-icons.html。喜欢这个

 <!-- import the iron-icon & paper-icon-button custom element -->
 <link rel="import"
  href="path/to/iron-icons/iron-icons.html">

  <!----- this is required for iron-icon image:transform to work ----->
 <link rel="import"
  href="path/to/iron-icons/image-icons.html">
 <!---------------------------------------------->

 <link rel="import"
  href="path/to/paper-icon-button/paper-icon-button.html">
 <link rel="import"
  href="path/to/paper-toolbar/paper-toolbar.html">
 <link rel="import"
  href="path/to/paper-menu-button/paper-menu-button.html">

我假设您已经安装/下载了iron-icon和其他元素。如果您正在使用凉亭，请执行此操作

  bower install --save PolymerElements/iron-icon 
  bower install --save PolymerElements/paper-icon-button

查找来自Polymer Element Catalog

的其他元素的bower install命令

Answer 2

iron-icons错误是Polymer入门套件的工件，其中包含一个名为my-icons.html的文件。此文件同名为低级铁图标文件之一。自然它会覆盖我们真正想要的那个。

将my-icons.html重命名为 anythingElse -icons.html或my-icons.html.buggy会立即将铁图标设为可用。哇噢。

Answer 3

似乎也是，因为 Polymer 2.0.1 ，

纸张图标按钮不包含默认图标集。

因此， PolymerElements / iron-icons / iron-icons.html 应单独。

以下是完整的解释：

纸张图标按钮不包含默认图标集。要使用图标从默认设置中包括 PolymerElements / iron-icons / iron-icons.html，并使用icon属性指定要使用的图标集中的哪个图标。

更多详细信息，请访问： https://www.webcomponents.org/element/PolymerElements/paper-icon-button

聚合物图标和纸张图标未显示

3 个答案: