Trial on paper-swatch-picker

index.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-icons/maps-icons.html">
<link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="/bower_components/paper-swatch-picker/paper-swatch-picker.html">
<dom-module id="add-label">
    <template>
        <paper-dialog entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
            <center>
                <h2>Create a new Label</h2>
            </center>
            <iron-icon icon="maps:local-offer" style="width:100px;height:100px;color: #2198F3;float:left;" id="icony"></iron-icon>
            <div style="float:right;">
                <paper-input id="input" error-message="This field cannot be empty" placeholder="eg. Work" value="{{labelName}}" style="margin-bottom:16px;float:left;"></paper-input>
                <paper-swatch-picker color="#2198F3" style="float:right;margin-top:10px;"></paper-swatch-picker>
            </div>
            <br/>
            <div class="buttons">
                <paper-button dialog-dismiss style="color:#666;">Cancel</paper-button>
                <paper-button on-click="newLabel" style="color:#ff4081;">Save</paper-button>
            </div>
            <br/>
        </paper-dialog>
    </template>
    <script>
        Polymer({
            is: 'add-label',
            ready: function(){
              this.labelName = '';  
            },
            open: function() {
                this.querySelector('paper-dialog').open();
                var icon = this.$.icony;
                Polymer.dom(this.root).querySelector('paper-swatch-picker').addEventListener('color-picker-selected', function (e) {
                    console.log(e.detail.color);
                    icon.style.color = e.detail.color;
                });
            }, 
            close: function() {
                this.querySelector('paper-dialog').close();
            },
            newLabel: function(){
                console.log("name: " + this.labelName + " color: " + this.$.colorPicker.color);
                this.close();
            }
        });
    </script>
</dom-module>