bug(MatBadge/MatIcon): Number not showing in badge when used with icon, using custom theme

[neildeighan]

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

Unknown

Description

Implementing a simple mat-icon with a matBadge="5", the number 5 is not shown in badge, it works ok when using one of the pre-defined themes i.e. Deep Purple & Amber, but when I select custom theme on adding angular/material, without changing the default colors, the number is not shown.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-adgwky?file=src%2Fmain.ts Steps to reproduce:

1. ng new test-app (scss)
2. ng add @angular/material ... ? Choose a prebuilt theme name, or "custom" for a custom theme: Custom ? Set up global Angular Material typography styles? Yes ? Include the Angular animations module? Include and enable animations 3) imported MatIconModule & MatBadgeModule into app.component.ts 4) Copied & pasted same code from https://material.angular.io/components/badge/examples (ts/html/css) to app.*

Expected Behavior

number is shown in badge when applied to mat-icon

Actual Behavior

badge is "blank"

Environment

• Angular: 17.2.2
• CDK/Material: 17.2.1
• Browser(s): Chrome/Firefox/Stackblitz (not tried any others)
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

[crisbeto]

It looks like we forgot to update the template for our custom themes. You should change the $demo-theme to this:

$demo-theme: mat.define-light-theme((
  color: (
    primary: $demo-primary,
    accent: $demo-accent,
    warn: $demo-warn,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

I've sent a fix for our own code.

[angular-automatic-lock-bot[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.}