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

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,9 +26,10 @@
         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)));
 
-        &:not(:has(igx-icon)) {
-            padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
+        &:has(igx-icon:only-child) {
+            padding-inline: 0;
         }
 
         igx-icon {
@@ -105,10 +106,7 @@
 
         min-width: var(--_dot-size);
         min-height: var(--_dot-size);
-
-        &:not(:has(igx-icon)) {
-            padding: 0;
-        }
+        padding: 0;
 
         igx-icon,
         > * {