Merge pull request #3966 from IgniteUI/ibarakov/fix-avatar-styling

kdinev · web-flow · commit de00f9d374ca · 2026-06-25T11:20:17.000+03:00
[Angular] Set background through correct css var
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
@@ -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
@@ -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
@@ -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
@@ -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>

Original file line number	Diff line number	Diff line change
`@@ -14,9 +14,9 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.avatar-sample.initials .igx-avatar{`
`17`		`- background: #e41c77;`
	`17`	`+ --ig-avatar-background: #e41c77;`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`.avatar-sample.icon .igx-avatar{`
`21`		`- background: #9e9e9e;`
	`21`	`+ --ig-avatar-background: #9e9e9e;`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<igx-avatar class="!light-avatar ![--background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>`
	`1`	`+<igx-avatar class="!light-avatar ![--ig-avatar-background:#FF4E00]" initials="DY" shape="rounded"></igx-avatar>`