Polymer - Default icon set in iron-icons don't show up but all other sets work

Question

Summary

I'm working on a Polymer project based off the Polymer starter kit, and I ran into a problem where icons from the default icon set aren't appearing. Their size and style is calculated correctly, but there's no SVG within the tag when I use inspect element. I've tried icons from maps and social which all work, but the ones from icons just don't have an image.

I've tried various different solutions:

1. Following this Stack Overflow question here, I did the accepted solution with no results.
2. I deleted all of my Polymer components and did a fresh bower install + bower update. Still no go.
3. I saw somewhere that the Polymer Starter Kit has a conflict with the my-icons.html file, so I renamed it to custom-icons.html. This also didn't work.

This is very confusing and frustrating because the problem seemed to pop up out of nowhere. One day the default iron-icons were working, and the next they weren't.

---

My imports

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

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

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

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

<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">

<link rel="import" href="app-data.html">
<link rel="import" href="log-out.html">
<link rel="import" href="custom-icons.html">

---

Utilization

<a href="/#/home-quotes" tabindex="-1">
  <paper-icon-item>
    <iron-icon icon="icons:settings" item-icon></iron-icon> <!-- This doesn't work -->
    Home
  </paper-icon-item>
</a>
<a href="/#/secret-quotes" hidden$="[[!storedUser.loggedin]]" tabindex="-1">
  <paper-icon-item>
    <iron-icon icon="maps:add-location" item-icon></iron-icon> <!-- This works? -->
    Secret Quotes
  </paper-icon-item>
</a>

Answer 1

UPDATE The bug has been fixed in Polymer Starter Kit 2.1.1. Now when you run polymer init starter-kit, the generated codebase will include the fix.

---

I suspect the problem is a naming conflict with your iconset (Issue #934), which was recently fixed.

Before the fix, the name of the custom iconset in Polymer Starter Kit was icons, which is unfortunately also the name of the default iconset from <iron-icons>. Since your custom-icons.html import occurs after iron-icons.html, your iconset takes precedence.

The fix is to rename your custom icons to avoid the name conflict, allowing for both iconsets to coexist. That is, change the iconset's name attribute in your custom-icons.html to something like this:

<iron-iconset-svg name="my-custom-icons" size="24">