Card avatar alignment incorrect in Safari

[gseabrook]

When using an avatar in the heading of an md-card, the svg does not align to the middle of the icon, and so the border looks incorrect

This can be seen by viewing the Angular Material docs in safari and looking at the page for 'Card'.

Material version - 1.1.0-RC5
Safari version - 9.1 (11601.5.17.1)

[BenjaminHofstetter]

I solved this issue with a CSS Rule

md-card-avatar > md-icon { height: auto; }

[BenjaminHofstetter]

md-card-avatar > md-icon { height: auto; } solves Safari but breaks IE. This is not a viable solution.

[BenjaminHofstetter]

md-icon { min-height: initial !important }

Works with IE, Safari, and Firefox

[clshortfuse]

Different browsers handle SVG height and width properties differently. It might be better to explicit set the SVG to use the md-icon height and width:

md-icon > svg {
  height: inherit;
  width: inherit;
}

I'm not sure why Safari would have this issue on md-card-avatar, but not elsewhere. It might be related to flexbox.