bug(List): custom typography

[Tomassito]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Giving list component as an example here. Why does it have subheading-2 defined as its font? Normally subheading-2 corresponds to h3 element which is bold (~700) and relatively big (~1.15 REM). This is how it looks like when dev-tools-applied to 1. element:

The problem is hidden until you want to provide your own typography definitions, because normally the theme sets the font to a fixed size of ~16px. However when we want our custom typography for the app, and define the h3 (subheading-2) this is when it breaks.

Reproduction

Steps to reproduce:

1. Provide custom typography for subheading-2:

$my-custom-typography: mat.define-typography-config(
  $subheading-2: mat.define-typography-level(1.125em, 1.333, 700),
);
@include mat.core($my-custom-typography);

2. Use list with list items somewhere.

Expected Behavior

Angular material components look good after providing near-standard typography.

Actual Behavior

The list component look much different after providing 'standard' styling for h3.

Environment

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