fix(button): Update the FAB button to support multiple icons from both sides. (#9269)

Closes #9238

Co-authored-by: MPopov <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -820,36 +820,32 @@
             }
         }
 
-        igx-icon {
-            display: inline-flex;
-            order: -1;
-            margin: rem(8px) 0;
-        }
-
-        * + igx-icon {
-            margin: 0;
-            margin-#{$right}: rem(12px);
-        }
+        @include _icon-w-margin(
+            map-get($icon-in-button-margin, 'comfortable'),
+            $left
+        );
     }
 
     %igx-button--fab-cosy {
         padding: map-get($button-floating-padding, 'cosy');
         min-width: map-get($button-floating-size, 'cosy');
         min-height: map-get($button-floating-size, 'cosy');
 
-        * + igx-icon {
-            margin-#{$right}: rem(8px);
-        }
+        @include _icon-w-margin(
+            map-get($icon-in-button-margin, 'cosy'),
+            $left
+        );
     }
 
     %igx-button--fab-compact {
         padding: map-get($button-floating-padding, 'compact');
         min-width: map-get($button-floating-size, 'compact');
         min-height: map-get($button-floating-size, 'compact');
 
-        * + igx-icon {
-            margin-#{$right}: rem(4px);
-        }
+        @include _icon-w-margin(
+            map-get($icon-in-button-margin, 'compact'),
+            $left
+        );
     }
 
     %igx-button--icon {
@@ -932,13 +928,9 @@
     }
 
     %igx-button--fab {
-        p,
-        span,
-        div {
-            @include igx-type-style($type-scale, $text) {
-                text-align: center;
-                margin: 0;
-            }
+        @include igx-type-style($type-scale, $text) {
+            text-align: center;
+            margin: 0;
         }
     }
 }

src/app/button/button.sample.html

@@ -172,7 +172,8 @@ <h4 class="sample-title">Buttons based on Display Density</h4>
                 </button>
             </div>
             <div class="button-sample">
-                <button igxRipple igxButton="fab" igxRipple [displayDensity]="density">
+                <button igxRipple igxButton="fab" [displayDensity]="density">
+                    <span>FAB</span>
                     <igx-icon>face</igx-icon>
                 </button>
             </div>