Search code examples
polymerpolymer-1.0mixinspaper-elements

Polymer: paper-icon-button custom image mixin

I need to make the image in paper-icon-button round. So I'm looking if there are any mixins available to the custom image. I can't find one within documentation.

Screenshot showing the expected outcome:

Screenshot

Any other elegant workarounds are welcome.

Solution

  • There aren't any mixins that could change the image's border radius, but you could style it in your <dom-module> with:

    ::content paper-icon-button img {
  border-radius: 50%;
}


    HTMLImports.whenReady(_ => {
  Polymer({
    is: 'x-foo'
  });
});
    <head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-icon-button {
          width: 100px;
          height: 100px;
        }
        ::content paper-icon-button img {
          border-radius: 50%;
        }
      </style>
      <paper-icon-button src="http://placekitten.com/300/300"></paper-icon-button>
    </template>
  </dom-module>
</body>

    codepen