paper-icon-button图标不显示求助：点击有波纹但图标缺失

嘿，我来帮你搞定这个paper-icon-button图标缺失的问题！从你描述的情况来看，波纹能正常显示说明按钮本身是工作的，图标不出来大概率是图标资源没正确引入或者图标名称配置错了，下面给你一步步排查和解决的方法：

1. 先把iron-icons的引入补全 #

你的代码里iron-...明显没写完，这肯定是核心问题之一！paper-icon-button依赖iron-icons提供的图标资源，你需要完整引入对应的图标集合：

• 如果想用默认的全套图标，要引入iron-icons.html：

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

• 要是只需要某一类图标（比如多媒体、社交类），可以按需引入子集，比如：

  <!-- 多媒体图标集 -->
  <link rel="import" href="../../bower_components/iron-icons/av-icons.html">
  <!-- 社交图标集 -->
  <link rel="import" href="../../bower_components/iron-icons/social-icons.html">
  

2. 检查图标名称是否准确 #

paper-icon-button的icon属性必须和iron-icons里定义的名称完全匹配，比如menu、delete、add这些，不能拼写错误。举个正确的用法例子：

<paper-icon-button icon="menu" title="打开菜单"></paper-icon-button>
<paper-icon-button icon="delete" title="删除项目"></paper-icon-button>

3. 验证组件路径是否正确 #

确认../../bower_components/这个路径和你的组件文件位置是匹配的。如果路径错了，浏览器加载不了图标资源文件，自然显示不出图标。你可以打开浏览器的开发者工具→网络面板，看看这些import的文件有没有返回404错误，如果有，调整路径到正确位置就行。

4. 版本兼容性排查 #

如果你用的是Polymer 2.x/1.x（因为你在使用bower），要确保paper-icon-button和iron-icons的版本是兼容的，版本不匹配也可能导致图标无法渲染。可以检查bower.json里的依赖版本，或者重新安装一遍依赖：

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

修正后的完整示例代码 #

给你贴一个能正常工作的组件示例，你可以参考调整：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<!-- 引入全套iron-icons -->
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

<dom-module id="my-icon-button-component">
  <template>
    <style>
      /* 可选：自定义按钮样式 */
      paper-icon-button {
        margin: 8px;
        --paper-icon-button-ink-color: #2196F3;
      }
    </style>

    <paper-icon-button icon="menu" alt="菜单按钮"></paper-icon-button>
    <paper-icon-button icon="delete" alt="删除按钮"></paper-icon-button>
  </template>

  <script>
    class MyIconButtonComponent extends Polymer.Element {
      static get is() { return 'my-icon-button-component'; }
    }
    customElements.define(MyIconButtonComponent.is, MyIconButtonComponent);
  </script>
</dom-module>

如果还是有问题，打开浏览器控制台看看有没有报错信息，根据错误提示再进一步排查就好啦！

内容的提问来源于stack exchange，提问作者Sachin Naik