fix(badge): fix badge paddings when using projection content (#17190)

* fix(badge): fix badge paddings when using projection content

* fix(badge): fix badge paddings and update API docs

* feat(badge): add gap between contents of badge

Author: didimmova

projects/igniteui-angular/badge/src/badge/badge.component.ts

@@ -77,7 +77,6 @@ export class IgxBadgeComponent {
     * Sets/gets the value to be displayed inside the badge.
     *
     * @remarks
-    * If an `icon` property is already set the `icon` will be displayed.
     * If neither a `value` nor an `icon` is set the content of the badge will be empty.
     *
     * @example
@@ -92,7 +91,6 @@ export class IgxBadgeComponent {
      * Sets/gets an icon for the badge from the material icons set.
      *
      * @remarks
-     * Has priority over the `value` property.
      * If neither a `value` nor an `icon` is set the content of the badge will be empty.
      * Providing an invalid value won't display anything.
      *

projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss

@@ -26,6 +26,12 @@
         border-radius: calc(var(--size) / 2);
         box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
+        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
+        gap: rem(2px);
+
+        &:has(igx-icon:only-child) {
+            padding-inline: 0;
+        }
 
         igx-icon {
             --size: var(--ig-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
@@ -56,7 +62,6 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
     }
 
     %igx-badge--success {