Merge pull request #6453 from IgniteUI/badge-update

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

Author: simeonoff

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
+<!-- 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:
+
+```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:
@@ -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_.