<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vaadin-icons</title>

        <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="../vaadin-icons.html" />

        <style>
            .icon {
                display: inline-block;
                vertical-align: top;
                margin: 8px 8px 16px 8px;
                text-align: center;
                width: 95px;
            }
            .icon span {
                font-family: sans-serif;
                font-size: 10px;
                display: block;
            }
        </style>
    </head>
    <body>
        <template is="dom-bind">
            <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
            <template is="dom-repeat" items="{{iconsets}}">
                <template is="dom-repeat" items="{{getIconNames(item)}}">
                    <div class="icon">
                        <iron-icon icon="[[item]]"></iron-icon>
                        <span>{{item}}</span>
                    </div>
                </template>
            </template>
        </template>

        <script>
            document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
                return iconset.getIconNames();
            };
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vaadin-icons</title>

        <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
        <link rel="import" href="../vaadin-icons.html" />

        <style>
            .icon {
                display: inline-block;
                vertical-align: top;
                margin: 8px 8px 16px 8px;
                text-align: center;
                width: 95px;
                cursor: default;
            }
            .icon span {
                font-family: sans-serif;
                font-size: 10px;
                display: block;
                color: #616161;
                -webkit-transition: all 600ms;
                transition: all 600ms;
            }
            .icon:hover span {
                color: #00b4f0;
            }
            iron-icon {
                fill: #616161;
                -webkit-transition: all 200ms;
                transition: all 200ms;
            }
            .icon:hover iron-icon {
                fill: #00b4f0;
            }
        </style>
    </head>
    <body>
        <template is="dom-bind">
            <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
            <template is="dom-repeat" items="{{iconsets}}">
                <template is="dom-repeat" items="{{getIconNames(item)}}">
                    <div class="icon">
                        <iron-icon icon="[[item]]"></iron-icon>
                        <span>{{item}}</span>
                    </div>
                </template>
            </template>
        </template>

        <script>
            document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
                return iconset.getIconNames();
            };
        </script>
    </body>
</html>

Add hover effect to demo fill change
Add hover effect to demo fill change
