fix(material/badge): move warning check later (#32724)

The badge has a check whether it's applied to an `aria-hidden` icon. This check happens very early which can cause false positives.

Fixes #27705.

Author: crisbeto

goldens/material/badge/index.api.md

@@ -4,14 +4,15 @@
 
 ```ts
 
+import { AfterViewInit } from '@angular/core';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/bidi';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 
 // @public
-export class MatBadge implements OnInit, OnDestroy {
+export class MatBadge implements OnInit, AfterViewInit, OnDestroy {
     constructor(...args: unknown[]);
     get color(): ThemePalette;
     set color(value: ThemePalette);
@@ -31,6 +32,8 @@ export class MatBadge implements OnInit, OnDestroy {
     // (undocumented)
     static ngAcceptInputType_overlap: unknown;
     // (undocumented)
+    ngAfterViewInit(): void;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;

src/material/badge/badge.ts

@@ -21,8 +21,8 @@ import {
   OnInit,
   Renderer2,
   ViewEncapsulation,
-  HOST_TAG_NAME,
   DOCUMENT,
+  AfterViewInit,
 } from '@angular/core';
 import {_animationsDisabled, ThemePalette} from '../core';
 import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
@@ -72,7 +72,7 @@ export class _MatBadgeStyleLoader {}
     '[class.mat-badge-disabled]': 'disabled',
   },
 })
-export class MatBadge implements OnInit, OnDestroy {
+export class MatBadge implements OnInit, AfterViewInit, OnDestroy {
   private _ngZone = inject(NgZone);
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
   private _ariaDescriber = inject(AriaDescriber);
@@ -162,22 +162,6 @@ export class MatBadge implements OnInit, OnDestroy {
       if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
         throw Error('matBadge must be attached to an element node.');
       }
-
-      const tagName = inject(HOST_TAG_NAME);
-
-      // Heads-up for developers to avoid putting matBadge on <mat-icon>
-      // as it is aria-hidden by default docs mention this at:
-      // https://material.angular.dev/components/badge/overview#accessibility
-      if (
-        tagName.toLowerCase() === 'mat-icon' &&
-        nativeElement.getAttribute('aria-hidden') === 'true'
-      ) {
-        console.warn(
-          `Detected a matBadge on an "aria-hidden" "<mat-icon>". ` +
-            `Consider setting aria-hidden="false" in order to surface the information assistive technology.` +
-            `\n${nativeElement.outerHTML}`,
-        );
-      }
     }
   }
 
@@ -213,6 +197,26 @@ export class MatBadge implements OnInit, OnDestroy {
     this._isInitialized = true;
   }
 
+  ngAfterViewInit() {
+    if (typeof ngDevMode === 'undefined' || ngDevMode) {
+      const nativeElement = this._elementRef.nativeElement;
+
+      // Heads-up for developers to avoid putting matBadge on <mat-icon>
+      // as it is aria-hidden by default docs mention this at:
+      // https://material.angular.dev/components/badge/overview#accessibility
+      if (
+        nativeElement.tagName.toLowerCase() === 'mat-icon' &&
+        nativeElement.getAttribute('aria-hidden') === 'true'
+      ) {
+        console.warn(
+          `Detected a matBadge on an "aria-hidden" "<mat-icon>". ` +
+            `Consider setting aria-hidden="false" in order to surface the information assistive technology.` +
+            `\n${nativeElement.outerHTML}`,
+        );
+      }
+    }
+  }
+
   ngOnDestroy() {
     // ViewEngine only: when creating a badge through the Renderer, Angular remembers its index.
     // We have to destroy it ourselves, otherwise it'll be retained in memory.