Q:

Polymer - icon with paper-badge

I tried use the paper-badge.I wrote this code:
<iron-icon id="star" icon="icons:star-border" style="fill:blue;height: 38px;
        width: 58px;"></iron-icon>
<paper-badge label="6" for="star"></paper-badge>

My problem is that the 6 is not close to the star.  

I want to make it more like

I dont know if their is attribute in polymer for doing it.

A:

You can modify paper-badge's custom css properties to achieve this. Note that I changed the width of the iron-icon to 38px.
<style>
    paper-badge {
        --paper-badge-margin-left: -8px;
        --paper-badge-margin-bottom: -12px;
    }
</style>

<div class="wrapper">
    <iron-icon id="star" icon="icons:star-border" style="fill:blue;height:38px;width:38px;"></iron-icon>
    <paper-badge label="6" for="star"></paper-badge>
</div>

Check it out here.

