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

【问题标题】：Polymer icon and paper icons not showing up聚合物图标和纸张图标未显示
【发布时间】：2017-09-27 23:29:28
【问题描述】：

我有一个名为 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>

但由于某种原因，纸图标或铁图标没有显示在这里

【问题讨论】：

你必须导入paper-icon和iron-icon

标签： javascript css html polymer polymer-1.0

【解决方案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找到其他元素的凉亭安装命令

【讨论】：

它一直工作到昨天，现在聚合物元素源http://element-party.xyz/ 被跨域资源共享策略阻止。

【解决方案2】：

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

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

【讨论】：

谢谢！这正是问题所在。

【解决方案3】：

似乎也是，自从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

【讨论】：