Sexy accessible, styleable buttons using SVG

Master.html

<link rel="import" href="/sys/polymer/polymer.html">
<link rel="import" href="/sys/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/CompositionEditor/elements/compositioneditor-inserter/compositioneditor-inserter.html">

<template>
    <style>
        .CompositionEditor-resetbutton {
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            font-size: inherit;
        }
    </style>
    <template is="dom-bind">
        <button class="CompositionEditor-resetbutton" slot="CompositionEditor/icon" on-click="toggleEditing" aria-labelledby="CompositionEditor-icon-brush">
            <svg modified$="{{model.layoutModified$}}" active$="{{model.editingMode$}}" viewBox="0 0 74 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
                <title id="CompositionEditor-icon-brush">Brush icon</title>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path d="M50.6083,21.3253 L44.9757,16.5195 C44.2833,15.9288 43.6588,15.263 43.1136,14.5343 L32.8148,0.7692 C32.2597,0.0273 31.1759,-0.0503 30.5209,0.6048 L7.1917,23.9339 C6.3492,24.7765 6.3224,26.134 7.131,27.0093 L15.7973,36.3885 C16.2673,36.897 15.5586,37.6298 15.0347,37.177 L5.284,28.7519 C4.4039,27.9915 3.0862,28.0395 2.2637,28.8619 L0.4782,30.6474 C-0.0585,31.1841 -0.1175,32.0344 0.3401,32.6401 L10.687,46.3359 C11.2338,47.0595 11.8589,47.7204 12.5511,48.3064 L18.724,53.5324 C19.7022,54.3605 21.1518,54.3004 22.058,53.3942 L50.7421,24.71 C51.6933,23.7587 51.6316,22.1985 50.6083,21.3253 Z M71.7972,63.308 C64.2282,55.8159 52.6804,47.3436 52.6804,47.3436 C49.75,45.3442 50.3918,43.1563 51.6293,41.9189 L57.6512,35.8971 C60.7919,32.7564 60.7919,27.6641 57.6512,24.5234 C57.1146,23.9868 56.2446,23.9868 55.708,24.5235 L22.65,57.5814 C22.1134,58.118 22.1134,58.988 22.65,59.5246 C25.7907,62.6653 30.883,62.6653 34.0237,59.5246 L40.0454,53.5028 C41.2829,52.2653 42.9751,51.4891 45.4702,54.5539 C45.4702,54.5539 53.9425,66.1018 61.4345,73.6707 C64.2909,76.5565 68.9487,76.5644 71.8198,73.6933 L71.8199,73.6933 C74.6908,70.8222 74.683,66.1644 71.7972,63.308 Z M67.9224,69.7959 C66.8954,70.8229 65.2303,70.8229 64.2033,69.7959 C63.1763,68.7689 63.1763,67.1038 64.2033,66.0768 C65.2303,65.0498 66.8954,65.0498 67.9224,66.0768 C68.9494,67.1038 68.9494,68.7689 67.9224,69.7959 L67.9224,69.7959 Z"></path>
                </g>
            </svg>
        </button>

        <compositioneditor-inserter slot="CompositionEditor/inserter" active="{{model.editingMode$}}"></compositioneditor-inserter>
    </template>
    <script>
        (function() {
            var script = document._currentScript || document.currentScript;
            var template = script.previousElementSibling;

            template.toggleEditing = function() {
                this.set("model.editingMode$", !this.get("model.editingMode$"));
            };
        })();
    </script>
    <template is="starcounter-composition">
        <style>
            .icon-holder {
                width: 22px;
                height: 22px;
                background: red;
            }

            .icon-holder ::content button {
                width: 100%;
                height: 100%;
            }

            .icon-holder ::content path {
                fill: blue;
            }

            .icon-holder ::content [active] path {
                fill: yellow;
            }

            .icon-holder:hover {
                cursor: pointer;
            }

            .icon-holder:hover ::content path {
                fill: green;
            }
        </style>
        <div class="icon-holder">
            <content select="[slot='CompositionEditor/icon']"></content>
        </div>
    </template>
</template>