1

I am making a simple auto complete input field with a close button at the end that would clear the field

<mat-form-field>
    <input matInput type="text">
    <button matSuffix mat-icon-button>
        <mat-icon>close</mat-icon>
    </button>
    <mat-autocomplete>...</mat-autocomplete>
</mat-form-field>

However, I noticed that the button does not scale properly with the mat-icon, and the icon appears a little off to the right of the horizontal center of the button. Tried text-align and float, but none works. I then removed matSuffix, the button is not positioned on the same line anymore of couse, but it scales with the icon and centers it correctly

Jack Guo
  • 3,959
  • 8
  • 39
  • 60

2 Answers2

1

Sounds like https://github.com/angular/material2/issues/10313. The fix is to apply font-size, width, and height (and possibly line-height) to the button to counter what mat-suffix does to it.

G. Tranter
  • 16,766
  • 1
  • 48
  • 68
1

I used the following style to align my icons better:

mat-icon {
  margin-right: 0px !important;
  vertical-align: middle;
}

This got rid of the space on the right (horizontal align) and moved the icon down a bit to align better with my calendar control or other input icons. Just make sure this doesn't break any other styling where mat-icons are used, in which case you will have to specifically style only the mat-icons for the inputs where needed and not apply this across the board.

Henk Kruger
  • 177
  • 1
  • 4