md-button-icon: Icon not centered

[epelc]

Icons in md-buttons are no longer centered vertically. There is more space on the top then to bottom.

See picture

You can see it easily if you set a background color on the icon so the full square is shown. But it's still noticeable without. See the button demo for an example https://material.angularjs.org/latest/demo/button

Adding layout="row" layout-align="center center" seems to fix but seems a bit overkill.

OSX 10.11.4
Chrome Version 50.0.2661.75 (64-bit)

[ThomasBurleson]

@epelc - Total overkill. Have any other suggestions ?

[epelc]

@ThomasBurleson didn't have much time to look as I'm traveling today and
this weekend. But I think the best way might be using the minimal required
fez attributes directly if I can't figure out what Css is causing it.

I was looking at the margin and padding highlights in chrome and it looks
like the icon gets pushed down out of where it should be in the highlights.

On Friday, April 15, 2016, Thomas Burleson notifications@github.com wrote:

@epelc https://github.com/epelc - Total overkill. Have any other
suggestions ?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#8066 (comment)

Best regards,
Ed Pelc
President

Website: freightchick.com
Phone: 941-735-4047

[epelc]

@ThomasBurleson If you change md-icon's display from inline-block to block it works. I think this is safe if we just apply it to .md-icon-button md-icon instead of .md-button md-icon.

Adding the following css will fix the alignment.

.md-icon-button md-icon {
  display: block;
}

I found this codepen with a few methods for getting display: inline-block; to center correctly. But I could not get any of them to work with angular-material's icon buttons. Angular material also appears to be using the second method by setting a line-height and vertical-align.