Form field icon button prefix or suffix is too small

[gtranter]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Icons and icon-buttons used as form field prefix or suffix have the same appearance (size, alignment ...).

What is the current behavior?

When a mat-icon-button is used as a prefix or suffix, it is smaller than just an icon.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-hlm3xm-9b6hqp

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

Doesn't look good especially when both are used at the same time (e.g. an icon prefix with an icon-button suffix) and doesn't comply with material design guidelines https://material.io/guidelines/components/text-fields.html#field-variations-figure-caption-2.

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

beta 6

Is there anything else we should know?

This appears to be due to style font size inheritance.

[mmalerba]

This is probably not something we will change in the legacy style form-fields but the icon is the same size in the other styles, i.e. any of the following:

<mat-form-field appearance="standard">...</mat-form-field>
<mat-form-field appearance="outline">...</mat-form-field>
<mat-form-field appearance="fill">...</mat-form-field>

[gtranter]

@mmalerba Can I know why not? Is there some technical reason or Material Design rule?

[mmalerba]

The full size icon button doesn't really fit in the legacy style form-field. The standard style is more or less an updated version of the legacy style as the spec has evolved. Some of the changes would have been too drastic to apply to everyone's existing form fields so it's opt-in for now by allowing the user to choose if they want the legacy or standard style. We will eventually remove the legacy style completely.

If you want to opt all of your form-fields into the new style without adding appearance="standard" to all of them, you can provide a default using MAT_FORM_FIELD_DEFAULT_OPTIONS: https://github.com/angular/material2/blob/master/src/lib/form-field/form-field.ts#L76

[gtranter]

@mmalerba I'm using a full size icon button in a material 5.2.x form-field right now and it fits fine - I've had to make style adjustments of course to work around the existing problems. Stackblitz:.

Is the "legacy" style being dropped from the Material Design specifications as well?

[mmalerba]

The spec doesn't distinguish between the two, "legacy" and "standard" both refer to the normal underline style which is in the spec. We just made the distinction to allow us to make changes bringing our implementation closer to what's in the spec without breaking people's layouts.

[gtranter]

@mmalerba Ah - I see now. Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}