Skip to content

fix(badge): clarifying the usage of badge value and icon #6453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 6 commits into from
Apr 16, 2026
Merged

fix(badge): clarifying the usage of badge value and icon #6453

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8aab97a
fix(badge): clarifying the usage of badge value and icon
kdinev Apr 6, 2026
0febcf1
Merge branch 'vnext' into badge-update
kdinev Apr 15, 2026
f505cd8
Update en/components/badge.md
kdinev Apr 15, 2026
b473bde
fix(badge): correct icon+value behavior and update NOTE to include va…
Copilot Apr 15, 2026
96114ee
Merge branch 'vnext' into badge-update
kdinev Apr 16, 2026
c769281
Update en/components/badge.md
didimmova Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion en/components/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<!-- Recommended -->
<igx-badge [value]="model.value"></igx-badge>

<!-- Avoid -->
<igx-badge>{{ model.value }}</igx-badge>
```

When both `[icon]` and `[value]` are set, the badge displays both simultaneously:

Comment on lines +142 to +153
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section introduces the value input, but later in the same document the “Badge in List” NOTE states that igx-badge has only icon and type inputs. Please update that NOTE (or rephrase it to avoid implying exclusivity) so the page stays internally consistent and doesn’t mislead readers about available inputs.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Member Author

@kdinev kdinev Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot apply changes based on this feedback

Copy link
Copy Markdown
Contributor

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in b473bde — the NOTE in "Badge in List" now includes the value input alongside icon and type so it's internally consistent with the rest of the page.

```html
<!-- Both the icon "check" and the value "5" will be shown -->
<igx-badge icon="check" value="5" type="success"></igx-badge>
```

To display only a numeric value without an icon, make sure `[icon]` is not set:

```html
<igx-badge [value]="unreadCount" type="info"></igx-badge>
```

### 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:
Expand Down Expand Up @@ -194,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_.

Expand Down
Loading