iron-icons

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-icons/v2.0.1/iron-icons/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../paper-styles/demo-pages.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../iron-meta/iron-meta.html">

<!-- load default iconset -->
<link rel="import" href="iron-icons.html">

<!-- load the rest -->
<link rel="import" href="av-icons.html">
<link rel="import" href="communication-icons.html">
<link rel="import" href="device-icons.html">
<link rel="import" href="editor-icons.html">
<link rel="import" href="hardware-icons.html">
<link rel="import" href="image-icons.html">
<link rel="import" href="maps-icons.html">
<link rel="import" href="notification-icons.html">
<link rel="import" href="social-icons.html">
<link rel="import" href="places-icons.html">

<custom-style>
  <style is="custom-style">
    h2 {
      text-transform: capitalize;
    }
    
    iron-icon {
      transition: all 0.2s;
      -webkit-transition: all 0.2s;
    }
    
    iron-icon:hover {
      fill: var(--google-yellow-700);
    }
    
    .set {
      display: block;
      text-align: center;
      margin: auto;
      padding: 1em 0;
      border-bottom: 1px solid silver;
    }
    
    .set:last-of-type {
      border-bottom: none;
    }
    
    .set:nth-of-type(4n-3) {
      color: var(--paper-grey-700);
    }
    
    .set:nth-of-type(4n-2) {
      color: var(--paper-pink-500);
    }
    
    .set:nth-of-type(4n-1) {
      color: var(--google-green-500);
    }
    
    .set:nth-of-type(4n) {
      color: var(--google-blue-500);
    }
    
    .container {
      display: inline-block;
      width: 10em;
      margin: 1em 0.5em;
      text-align: center;
    }
    
    .container > div {
      margin-top: 0.5em;
      color: black;
      font-size: 10px;
    }

  </style>
</custom-style>

<dom-bind>
  <template is="dom-bind" id="scope">
    <dom-repeat>
     ...