From 3c2fa6dceeabe813184b18d5423c2ec5e8827b90 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Mon, 16 Dec 2024 09:52:00 +0100
Subject: [PATCH] feat: use background for icons

---
 .../scss/components/_check-requirements.scss  | 33 ++++---------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/_dev/src/scss/components/_check-requirements.scss b/_dev/src/scss/components/_check-requirements.scss
index 9128bf7ad..d5dcd1849 100644
--- a/_dev/src/scss/components/_check-requirements.scss
+++ b/_dev/src/scss/components/_check-requirements.scss
@@ -27,44 +27,23 @@ $e: ".check-requirements";
     }
 
     &__requirement {
-      position: relative;
       padding-inline-start: 1.75rem;
+      background-repeat: no-repeat;
+      background-position: left center;
+      background-size: 1.5rem 1.5rem;
       font-size: 0.875rem;
       line-height: 1.4;
 
-      &::before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 0;
-        display: block;
-        width: 1.375rem;
-        height: 1.25rem;
-        font-family: var(--#{$ua-prefix}font-family-material-icons);
-        font-size: 1.25rem;
-        line-height: 1;
-        transform: translateY(-50%);
-      }
-
       &--success {
-        &::before {
-          content: "check";
-          color: var(--#{$ua-prefix}green-500);
-        }
+        background-image: url("../../img/check.svg");
       }
 
       &--warning {
-        &::before {
-          content: "warning";
-          color: var(--#{$ua-prefix}yellow-500);
-        }
+        background-image: url("../../img/warning.svg");
       }
 
       &--error {
-        &::before {
-          content: "close";
-          color: var(--#{$ua-prefix}red-500);
-        }
+        background-image: url("../../img/close.svg");
       }
     }