bug(matIcon): not inline well in Dialog Title

[zijianhuang]

Reproduction

Use any StackBlitz link at https://material.angular.io/components/dialog/examples

Then past the following:

<h1 mat-dialog-title><mat-icon inline="true">error</mat-icon> Favorite Animal</h1>
<div mat-dialog-content>
  <h1>OOKK<mat-icon inline="true">error</mat-icon></h1>

Expected Behavior

automatically sizing the icon to match the font size of the element the icon is contained in.

Actual Behavior

Icon is rendered well in dialog content, but not in dialog title. And worse, the top and the bottom of the icon gets truncated a little bit.

Environment

• Angular: 10.1.1
• CDK/Material: 10.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

I don't think that this is something that the dialog title was meant to do, but it seems like a reasonable request. Also it may be fixed in the MDC dialog implementation.

[zijianhuang]

@crisbeto

Thanks for understanding. As described at https://material.io/components/dialogs#full-screen-dialog, icon is used in Title only with a button in full screen dialog.

Having a icon well supported in the title of small dialog will cover more complex business scenarios. I see it is an slight extension of Material Design, or in other words, Material Design does not discourage such application design.

Thanks again.

[amysorto]

Currently does not work with the MDC based dialog and icon components but would be a good thing to add.