Shadow-dom img src and border-radius

[derfel]

Description

Using the src attribute of paper-icon-button and shadow-dom there's no way to apply border-radius. How can I workaround this?

Expected outcome

The img inside the paper-icon-button has border-radius applied.

Actual outcome

The img is square and boring.

Live Demo

Steps to reproduce

1. Open the demo file
2. Modify the takeoff demo removing icon and setting src:
3. Add the following style: .blue::content img { border-radius: 50%; }
4. It will work if you serve it with: polymer serve
5. It won't work if you put an element like this in app the uses shadow-dom.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[notwaldorf]

You can just style the paper-icon-button itself: http://jsbin.com/sifoxe/edit?html,output

[derfel]

The paper-icon-button is round, but the image inside it's not. I've modified your example: http://jsbin.com/saxulizegu/edit?html,output

[notwaldorf]

But if I use dev tools in your example, and explicitly add the border-radius to the iron-icon, it doesn't become round either, so the mixin wouldn't help.

[derfel]

You're right, it needs to be applied to the img element. Using shadow dom, I cannot use ::content and cannot apply border-radius directly to the img element. So I can't find a way to get a round image inside paper-icon-button.

I've prepared 2 examples: Round: http://jsbin.com/sagemubira/edit?html,output Square: http://jsbin.com/ligabipaxo/edit?html,output

[kelvinwatson]

@derfel I have not been able to apply a border-radius to the img inside of a paper-icon-button. I looked at your examples, and tried doing paper-icon-button::content img { border-radius: 50%; } but that doesn't work.