bug:(form-field) icon-button used as suffix/prefix displays wrong on Edge for fill appearance

[IlCallo]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Chrome

What is the current behavior?

Firefox

Edge

What are the steps to reproduce?

<mat-form-field appearance="fill">
    <mat-label>Label</mat-label>

    <input matInput>

    <button mat-icon-button matSuffix><mat-icon>cancel</mat-icon></button>
</mat-form-field>

https://stackblitz.com/edit/angular-material2-issue-gjmq4s

What is the use-case or motivation for changing an existing behavior?

Keep ripple effect on click of icon-button.

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

Angular 6.1.2
Angular Material 6.4.7
TS 2.9.x
Firefox, Edge

Is there anything else we should know?

I will switch to mat-icon for now, for which everything works fine.
On Material Design guidelines it's not clear if a suffix/prefix element could/should/must have or not a ripple effect, was just trying to be consistent with all others clickable icons.

[manklu]

@IlCallo I have tried your snippet and it looks the same in all three browsers

https://stackblitz.com/edit/angular-material2-issue-6qx8gu

[IlCallo]

You're right, I forgot to mention it happens with fill appearance (I thought it was obvious from the screenshots), I updated the title and the code and linked a modified version of your stackblitz :)

[zbream]

Still running into this. Notably, it affects the use of the datepicker toggle as a suffix.