From 3ae332eca504d2c3f70a96eed298ef061be3b6a0 Mon Sep 17 00:00:00 2001
From: onlyexeption <ibarakov@infragistics.com>
Date: Mon, 1 Jun 2026 11:11:46 +0300
Subject: [PATCH] fix(avatar): set background through correct css var

---
 .../avatar/avatar-sample-1/avatar-sample-1.component.scss     | 2 +-
 .../avatar/avatar-sample-3/avatar-sample-3.component.scss     | 4 ++--
 .../avatar/avatar-sample-4/avatar-sample-4.component.scss     | 2 +-
 .../avatar-tailwind-styling.component.html                    | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss b/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss
index 84de4e43af..d427839f1f 100644
--- a/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss
+++ b/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss
@@ -1,5 +1,5 @@
 .igx-avatar{
-    background: #e41c77;
+    --ig-avatar-background: #e41c77;
     color: black;
     margin: 15px;
 }
diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss
index 1ae4d36064..4d7beea4c1 100644
--- a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss
+++ b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss
@@ -14,9 +14,9 @@
 }
 
 .avatar-sample.initials .igx-avatar{
-    background: #e41c77;
+    --ig-avatar-background: #e41c77;
 }
 
 .avatar-sample.icon .igx-avatar{
-    background: #9e9e9e;
+    --ig-avatar-background: #9e9e9e;
 }
diff --git a/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss b/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss
index 3a7ee69e8c..ecedb13921 100644
--- a/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss
+++ b/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss
@@ -1,4 +1,4 @@
 .igx-avatar{
-    background: #9e9e9e;
+    --ig-avatar-background: #9e9e9e;
     margin: 15px;
 }
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index 736311f581..517decd549 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1 +1 @@
-<igx-avatar class="!light-avatar ![--background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>
+<igx-avatar class="!light-avatar ![--ig-avatar-background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>