feat: add icon button component and integrate into cart item for improved UI

src/app/shared/components/cart-item/cart-item.component.html

@@ -41,9 +41,11 @@
         (increase)="onIncrease()"
         (decrease)="onDecrease()"
       />
-      <button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button" (click)="onRemove()">
-        <i class="fa-solid fa-trash"></i>
-      </button>
+      <app-icon-button
+        variant="trash"
+        class="cart-item-remove-btn"
+        (click)="onRemove()"
+      />
     </div>
   </div>
 </article>

src/app/shared/components/cart-item/cart-item.component.scss

@@ -96,10 +96,5 @@
 
 
 .cart-item-remove-btn {
-  width: 18px;
-  height: 18px;
   margin-left: 0.35rem;
-  padding: 0;
-  color: #b3b3b3;
-  font-size: 12px;
 }

src/app/shared/components/cart-item/cart-item.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
+import { IconButtonComponent } from '../icon-button/icon-button.component';
 
 export interface CartItemAttribute {
   label: string;
@@ -9,7 +10,7 @@ export interface CartItemAttribute {
 @Component({
   selector: 'app-cart-item',
   standalone: true,
-  imports: [QuantitySelectorComponent],
+  imports: [QuantitySelectorComponent, IconButtonComponent],
   templateUrl: './cart-item.component.html',
   styleUrl: './cart-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush