pd-list-item.html

<dom-module id="pd-list-item">
    <style>
        a {
            padding: 0.5em 1em 0.5em 3em;
            display: inline-block;
            width: 100%;
            vertical-align: middle;
            position: relative;
            cursor:pointer;
            box-sizing:border-box;
        }
        .pd-list-item iron-icon.iron-icon-0 {
          position: absolute;
          top: 0.5em;
        }
        .left iron-icon{
            left: 1em;
        }
        .right iron-icon{
            right: 0.5em;
        }
        .right a{
            padding: 0.5em 2.5em 0.5em 1em;
        }
    </style>
    <template>
        <div class$="{{position}}">
            <a title="" href$="{{url}}">
                <content></content>
                <iron-icon icon="{{icon}}" name="{{icon}}"></iron-icon>
            </a>
        </div>
    </template>
</dom-module>

<script>
  Polymer({
      is: "pd-list-item",
        properties: {
            position: {
                type: String,
                value: true,
                reflectToAttribute: true,
                notify:true
            },
            icon: {
                type: String,
                value: "",
                reflectToAttribute: true,
                notify: true
            },
            url: {
                type: String,
                reflectToAttribute: true,
                value:"",
                notify: true
            }
        },
        ready: function () {
            var self = this;
            if (self.position == "" || self.position == true)
                self.position = "left";
            if (self.url == "" || self.url == null) {
                self.url = "javascript:void(0);";
            }
        }
  });
</script>