Fix query builder expression actions (#14883)

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -225,7 +225,7 @@
             .igx-filter-tree__expression-column {
                 padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
             }
-            
+
             igx-prefix {
                 display: flex;
             }
@@ -239,20 +239,10 @@
     %filter-tree__expression-actions {
         display: inline-flex;
         margin: 0 rem(8px);
+        gap: rem(8px);
 
-        igx-icon {
-            cursor: pointer;
-            color: color(null, 'gray', 500);
-            outline-style: none;
-
-            &:hover,
-            &:focus {
-                color: color(null, 'gray', 800);
-            }
-        }
-
-        igx-icon + igx-icon {
-            margin-inline-start: rem(8px);
+        %igx-icon-button-display {
+            --size: #{sizable(rem(20px), rem(24px), rem(32px))};
         }
     }
 

projects/igniteui-angular/src/lib/query-builder/query-builder.component.html

@@ -147,29 +147,32 @@ <h6 class="igx-filter-empty__title">
                     expressionItem.hovered
                 "
             >
-                <span tabindex="0"
+                <button
+                    igxIconButton="flat"
+                    aria-labelledby="edit-expression"
+                    [style.--component-size]="getComponentSizeStyles()"
                     (keydown)="invokeClick($event)"
                     (click)="enterExpressionEdit(expressionItem)">
-                    <igx-icon>
-                        edit
-                    </igx-icon>
-                </span>
-                <span tabindex="0"
+                    <igx-icon id="edit-expression">edit</igx-icon>
+                </button>
+
+                <button
+                    igxIconButton="flat"
+                    aria-labelledby="add-expression"
+                    [style.--component-size]="getComponentSizeStyles()"
                     (keydown)="invokeClick($event)"
-                    (click)="enterExpressionAdd(expressionItem)">
-                    <igx-icon
-                        *ngIf="
-                            !expressionItem.inAddMode &&
-                            (expressionItem.parent !== currentGroup ||
-                                expressionItem !==
-                                    currentGroup.children[
-                                        currentGroup.children.length - 1
-                                    ])
-                        "
-                    >
-                        add
-                    </igx-icon>
-                </span>
+                    (click)="enterExpressionAdd(expressionItem)"
+                    *ngIf="
+                        !expressionItem.inAddMode &&
+                        (expressionItem.parent !== currentGroup ||
+                            expressionItem !==
+                                currentGroup.children[
+                                    currentGroup.children.length - 1
+                                ])
+                    "
+                >
+                    <igx-icon id="add-expression">add</igx-icon>
+                </button>
             </div>
         </div>