聚合物图标和纸张图标没有显示出来。

Question

聚合物图标和纸张图标没有显示出来。

7

我有一个叫做input-header的polymer 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>

但由于某种原因，paper-icon或iron-icons在这里看不到。

- Arunabh Das

你需要导入 paper-icon 和 iron-icon。 - SG_

3个回答

6

铁图标的bug是Polymer starter kit的一个副产品，其中包括一个名为my-icons.html的文件。这个文件与一个低级别的铁图标文件同名。自然地，它会覆盖我们真正想要的那个文件。

将my-icons.html重命名为任何其他名称-icons.html或my-icons.html.buggy将立即使铁图标可用。哇赛。

- krasicki

谢谢！这正是问题所在。 - Simon Schärer

0

从Polymer 2.0.1开始，似乎

paper-icon-button不再包含默认的图标集。

因此，需要单独引入PolymerElements/iron-icons/iron-icons.html。

以下是完整的解释：

paper-icon-button不包含默认的图标集。要使用默认集中的图标，请引入PolymerElements/iron-icons/iron-icons.html，并使用icon属性指定要使用的图标。

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

- burak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SG_ · Accepted Answer

更新： 可以查看这个演示

您需要导入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，请执行以下操作：

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

从Polymer元素目录中查找其他元素的bower安装命令。