bug(matIcon): not inline well in Dialog Title

zijianhuang commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 1 year ago

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

angular / components