From 39f2af15344e9d8185434584a726dfc99765c3cc Mon Sep 17 00:00:00 2001
From: mstoyanova <mstoyanova@infragistics.com>
Date: Fri, 24 Apr 2026 14:36:32 +0300
Subject: [PATCH 1/2] fix(badge): update sample to match the right way to  use
 of the badge component

---
 .../igniteui-angular-components/references/data-display.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md
index c63c3c1ac9c..d1debc0ce42 100644
--- a/skills/igniteui-angular-components/references/data-display.md
+++ b/skills/igniteui-angular-components/references/data-display.md
@@ -133,9 +133,10 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 
 ```html
 <!-- Image avatar with badge overlay -->
-<igx-avatar [src]="user.photo" shape="circle" size="large">
-  <igx-badge igxAvatarBadge [type]="'success'" [icon]="'check'"></igx-badge>
-</igx-avatar>
+<div class="wrapper">
+  <igx-avatar [src]="user.photo" shape="circle" size="large"></igx-avatar>
+  <igx-badge [type]="'success'" [icon]="'check'"></igx-badge>
+</div>
 
 <!-- Initials avatar -->
 <igx-avatar initials="JD" shape="circle"></igx-avatar>

From 554c1a013dfc479bb12a985c0784c48882c32814 Mon Sep 17 00:00:00 2001
From: mstoyanova <mstoyanova@infragistics.com>
Date: Fri, 24 Apr 2026 14:50:03 +0300
Subject: [PATCH 2/2] fix(badge): update example to include avatar and wrapper
 for badge component

---
 .../igniteui-angular/badge/src/badge/badge.component.ts   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/badge/src/badge/badge.component.ts b/projects/igniteui-angular/badge/src/badge/badge.component.ts
index 4774c4bed21..45a7132b6ae 100644
--- a/projects/igniteui-angular/badge/src/badge/badge.component.ts
+++ b/projects/igniteui-angular/badge/src/badge/badge.component.ts
@@ -32,9 +32,11 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
  *
  * @example
  * ```html
- * <igx-avatar>
- *   <igx-badge icon="check" type="success"></igx-badge>
- * </igx-avatar>
+ * <div class="wrapper">
+ *  <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+ *  <igx-badge icon="check" type="success" shape="square"></igx-badge>
+ * </div>
+ * ```
  */
 @Component({
     selector: 'igx-badge',