angular / angular/components

bug(matIcon): not inline well in Dialog Title

Open
#20,637 3 comments 1 reaction 0 assignees View on GitHub
area: material/dialog P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

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

Then past the following:
```html

error Favorite Animal



OOKKerror


```


#### 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

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in a StackBlitz example from the Angular Material dialog examples using the provided mat-dialog-title and mat-icon markup. Compare the icon in the dialog title with the one in dialog content, then trace the mat-icon and dialog-title entry points; done means the inline icon matches the surrounding font size without its top or bottom being truncated.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.