Skip to content

[mat-flat-button, mat-stroked-button] mat-icon within button doesnt align center vertically #9799

Closed
@eTallang

Description

@eTallang

Bug, feature request, or proposal:

Bug

What is the expected behavior?

To have a mat-icon element align center vertically within all material button types.

What is the current behavior?

A mat-icon element aligns top when using attribute mat-flat-button or mat-stroked-button.

What are the steps to reproduce?

https://stackblitz.com/edit/vertical-alignment-issue
Screenshot:
image

As the demo illustrates, the icon is not aligned correctly in the mat-flat-button and mat-stroked-button.
I also noticed that the height of a mat-flat-button and mat-stroked-button differs from the height of a mat-button or mat-raised-button. These should all have the same height in order to give the UI balance when combining button types.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.2.1
Angular Material 5.2.0
Chrome

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/buttonmaterial specIssue related to the Material Design spec https://material.io/design/

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions