Add mixin for img when src is specified

[bennypowers]

When src is specified, the --iron-icon mixin does not enable the user to apply styles directly to the created img tag. Adding a new mixin for this purposes allows users to style the image, for example adding border-radius: 50% for a rounded avatar.

Graphic Illustration

<style>
      .userProfile {
        --iron-icon-image: {
          border-radius: 50%;
        };
      }
      .userProfile2 {
        --iron-icon: {
          border: 1px solid red;
          border-radius: 50%;
        };
      }
</style>

<paper-icon-button alt="User Profile" src="[[user.photoURL]]" class="userProfile"></paper-icon-button>

<paper-icon-button alt="User Profile" src="[[user.photoURL]]" class="userProfile2"></paper-icon-button>

[tony19]

FYI, If your goal is to round a square image, that's already possible:

paper-icon-button {
  width: 64px;
  height: 64px;
  --iron-icon: {
    border-radius: 50%;
    overflow: hidden;  /* hide overflow of underlying image */
  };
}

codepen

[tony19]

Related to #84

[notwaldorf]

Closing, as this isn't needed (@tony19's workaround is correct).

Please re-open if there's still something this mixin is needed for