From 8aab97ae81830d1352119c7746d92d360eec5f6a Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 6 Apr 2026 12:17:27 +0300 Subject: [PATCH 1/4] fix(badge): clarifying the usage of badge value and icon --- en/components/badge.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/en/components/badge.md b/en/components/badge.md index b95e1d7b13..d9f3daf022 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -137,6 +137,31 @@ igx-badge { } ``` +### Badge Value and Icon + +Use the `[value]` input to display text or a numeric count inside the badge. This is the recommended approach instead of projecting content directly: + +```html + + + + +{{ model.value }} +``` + +The `[icon]` input takes precedence over `[value]`. When both inputs are set, the icon is displayed and the value is ignored: + +```html + + +``` + +To display a numeric value without an icon, make sure `[icon]` is not set (or is `null`/empty): + +```html + +``` + ### Badge Icon In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: From f505cd826bb7b85fdf381218b6c9bb5d3dd3a676 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 15 Apr 2026 15:56:43 +0300 Subject: [PATCH 2/4] Update en/components/badge.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- en/components/badge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/badge.md b/en/components/badge.md index d9f3daf022..625bffff0a 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -153,7 +153,7 @@ The `[icon]` input takes precedence over `[value]`. When both inputs are set, th ```html - + ``` To display a numeric value without an icon, make sure `[icon]` is not set (or is `null`/empty): From b473bde60e59ef9a1f788762f30b8e56865450c5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 15 Apr 2026 12:58:50 +0000 Subject: [PATCH 3/4] fix(badge): correct icon+value behavior and update NOTE to include value input Agent-Logs-Url: https://github.com/IgniteUI/igniteui-docfx/sessions/c15a6d41-5bea-48e0-b07b-7c44a9963c73 Co-authored-by: kdinev <1472513+kdinev@users.noreply.github.com> --- en/components/badge.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/en/components/badge.md b/en/components/badge.md index 625bffff0a..c95b663cea 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -149,14 +149,14 @@ Use the `[value]` input to display text or a numeric count inside the badge. Thi {{ model.value }} ``` -The `[icon]` input takes precedence over `[value]`. When both inputs are set, the icon is displayed and the value is ignored: +When both `[icon]` and `[value]` are set, the badge displays both simultaneously: ```html - + ``` -To display a numeric value without an icon, make sure `[icon]` is not set (or is `null`/empty): +To display only a numeric value without an icon, make sure `[icon]` is not set: ```html @@ -219,7 +219,7 @@ export class AppModule {} ``` >[!NOTE] ->The [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied. +>The [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon), [`value`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#value), and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied. In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_. From c769281056f74fb72bb305ab66758891b895019c Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Thu, 16 Apr 2026 12:06:16 +0300 Subject: [PATCH 4/4] Update en/components/badge.md --- en/components/badge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/badge.md b/en/components/badge.md index c95b663cea..289a6ccbb1 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -153,7 +153,7 @@ When both `[icon]` and `[value]` are set, the badge displays both simultaneously ```html - + ``` To display only a numeric value without an icon, make sure `[icon]` is not set: