I'm currently adding badges to the buttons of the menu of my application, which already works fine. I want to display the number of notifications the user still has to look at like this: <span matBadge="4" matBadgeColor="warn">Look at these notifications!</span> On a mobile phone though, the menu is hidden behind a burger icon. I don't want the user to show how many notifications he has on top of this icon. I only want him to know that he has some, and when he opens the menu, he will see a badge with the number of notifications on the various buttons. My problem is that an empty badge is always hidden. I can't seem to show it like this: <span matBadge="" matBadgeColor="warn">Look at these notifications!</span> Is it not possible at all to show an empty badge? Am I missing something, or is this behaviour by design? Continue reading...