style: button clear all filter

src/app/shared/components/presentationals/shared-data-table/shared-data-table.presentational.html

 <div class="data-table">
-  <div *ngIf="isFilterApplied()">
-    <mat-icon class="clear-filter"
-              [matTooltip]="'table.clear' | translate"
-              [matTooltipPosition]="'right'"
-              (click)="clearFilters()"
-    >clear</mat-icon>
+  <div class="clear-filter-wrapper">
+    <button *ngIf="isFilterApplied()"
+            mat-icon-button
+            mat-button
+            class="clear-filter"
+            (click)="clearFilters()"
+            [matTooltip]="'table.clear' | translate"
+            [matTooltipPosition]="'right'"
+    >
+      <mat-icon
+
+      >clear
+      </mat-icon>
+    </button>
   </div>
   <p-table
       [columns]="columns"

src/app/shared/components/presentationals/shared-data-table/shared-data-table.presentational.scss

@@ -58,14 +58,18 @@ $invalidInputBorderColor: #ff0084;
 $inputGroupTextColor: #444444;
 
 .data-table {
-  .clear-filter {
-    color: $medium-light-grey;
-    font-size: $size-status-history-button;
-    width: $size-status-history-button;
-    height: $size-status-history-button;
-    right: 32px;
-    padding: 6px;
+
+  .clear-filter-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    height: 40px;
+
+    @include respond-to-smaller-than-breakpoint('sm') {
+      display: none;
+    }
   }
+
   .no-datas {
     display: flex;
     justify-content: center;