Merge pull request #6466 from IgniteUI/didimmova/update-badge-topic

docs(badge): update value and icon in badge docs

Author: kdinev

en/components/badge.md

@@ -142,14 +142,16 @@ 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:
+Use the `[value]` input to display text or a numeric count inside the badge:
 
 ```html
-<!-- Recommended -->
 <igx-badge [value]="model.value"></igx-badge>
+```
+
+Use the `[icon]` input to display an icon inside the badge:
 
-<!-- Avoid -->
-<igx-badge>{{ model.value }}</igx-badge>
+```html
+<igx-badge icon="check" type="success"></igx-badge>
 ```
 
 When both `[icon]` and `[value]` are set, the badge displays both simultaneously:
@@ -159,10 +161,16 @@ When both `[icon]` and `[value]` are set, the badge displays both simultaneously
 <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:
+Or you can project content directly:
 
 ```html
-<igx-badge [value]="unreadCount" type="info"></igx-badge>
+  <igx-badge>{{ model.value }}</igx-badge>
+
+  <!-- When projecting both icon and text, wrap the text to keep correct padding. -->
+  <igx-badge>
+    <igx-icon>bluetooth</igx-icon>
+    <span>Bluetooth</span>
+  </igx-badge>
 ```
 
 ### Badge Icon