refactor(icon): bind icon as CSS mask

spike-rabbit · timowolf · commit c308e744bc70 · 2026-02-17T09:38:20.000+01:00
This avoids potential XSS risks, by injecting the icon only as CSS mask-image.
diff --git a/api-goldens/element-ng/icon/index.api.md b/api-goldens/element-ng/icon/index.api.md
@@ -5,7 +5,6 @@
 ```ts
 
 import * as _angular_core from '@angular/core';
-import * as _angular_platform_browser from '@angular/platform-browser';
 import { EntityStatusType } from '@siemens/element-ng/common';
 import { InjectionToken } from '@angular/core';
 import { Provider } from '@angular/core';
diff --git a/api-goldens/element-ng/theme/index.api.md b/api-goldens/element-ng/theme/index.api.md
@@ -7,7 +7,6 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
 import { Observable } from 'rxjs';
-import { SafeHtml } from '@angular/platform-browser';
 
 // @public (undocumented)
 export const ELEMENT_THEME_NAME = "element";
@@ -54,7 +53,7 @@ export class SiThemeService {
     get resolvedColorScheme(): ThemeType | undefined;
     setActiveTheme(name?: string, type?: ThemeType): Observable<boolean>;
     readonly themeChange: EventEmitter<Theme | undefined>;
-    readonly themeIcons: i0.WritableSignal<Record<string, SafeHtml>>;
+    readonly themeIcons: i0.WritableSignal<Record<string, string>>;
     readonly themeNames$: Observable<string[]>;
     get themeNames(): string[];
     updateProperty(name: string, value: string, type: keyof ThemeColorSchemes): void;
diff --git a/playwright/snapshots/maps/static.spec.ts-snapshots/si-map--si-map-labels-element-examples-chromium-light-linux.png b/playwright/snapshots/maps/static.spec.ts-snapshots/si-map--si-map-labels-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a465cf8709d20b328f80bb5a8737149196076c5ed013b4e9306659c8498ca1c7
-size 17468
+oid sha256:54eecbadc920192dccb27b4be14cc771634c3703f127764cbb3654a4907ade73
+size 17679
diff --git a/playwright/snapshots/si-content-action-bar-states.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-content-action-bar-states.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7699495208d637894b0e8317a3ab7addbbb75bc44aa97b750bce3339edf5013a
-size 33199
+oid sha256:8feab3e1aa5ae9db26125dc6b3871083c38774a40ef3856e79208faf7e7cac51
+size 32943
diff --git a/playwright/snapshots/si-content-action-bar-states.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-light-linux.png b/playwright/snapshots/si-content-action-bar-states.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:645415c86dc61866c470318cbc767346eb6ed1cb0a6887c9d6047c09cce7b01d
-size 32519
+oid sha256:c7ab665daa08e64c89be74f6726d6b9307fc4b909d281d63dfea7ce2a2232073
+size 32264
diff --git a/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-date-range-filter.spec.ts-snapshots/si-date-range-filter--si-date-range-filter--mobile-presets-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2c0ac91251b05d9d2e5b330dd1c8fd954b9c85015d1d69145eed9b8229a7e1b6
-size 19488
+oid sha256:9aa86e0854f2080ca7a6186613ccd544e60ee7332541e8d2336542deb4e6a047
+size 19487
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7cddf89b59ac508e1a71ae45b7bf222602f6d8254a8e9a85ca299bdf31968c94
-size 35510
+oid sha256:b1b84fba9ce4d67b8ded1caef850f05a8435a860ef3162577bf4fd649980006f
+size 36217
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range--selection-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:642e5dab802c61b078bd73278fabf1b6a8490a21ba38e7f53ee667ee77b60b9c
-size 36035
+oid sha256:2348f4d1e3e71c2622718df0a0c0a28608bd76e38ee17db4fe18c94edc0fa14f
+size 36542
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:72d3a9e59051e7ef8e5fe7a58e3a350d17a9ac6a0713be63b4c2627049c80e23
-size 50959
+oid sha256:455089ef1b0f0c62e47aa106eb80ba3475eaa72697932bf9abf85aa4b98c012a
+size 54984
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-1-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f117dcfaf4d0a8adab32fc35351544ca8c2ab990a6133eac12686d6aaf520a88
-size 50792
+oid sha256:37b6babea0fe5f777d12ea6c8a731bebdd5dbfd562831f6f8dc1952af84c742c
+size 54876
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:40bb8859de8534c013c52b76b540f795b01d074cef6531ff2c7c60068b8100be
-size 55313
+oid sha256:e2956a36c23ee35d88e6a67269dfb7fded60e97ff2920c4deafe6df8d0a77f37
+size 58831
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--click-through-months-2-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4484ea2fff472ae090eefac650388005cbd4583964a7a0b98fb29c53472385e8
-size 54996
+oid sha256:3c72ae5515bf40bb3886a6846cb53c8db658d8d048af8ec809d76ff607e5cc0e
+size 58555
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec0290ca9bd26a6309639e36d13ff49660244b071ae42a14b3a4e5f2e5b6ef92
-size 57422
+oid sha256:cb36d1490f334ceef8e4a91e6aebf4c547a3b8fa70ecb041cc9c0649162dd033
+size 61346
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-1-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6b0e05ed341a4ff5c7f9f7df6be5c6ed5c19fee4f206017bbc187794680b2e8
-size 56794
+oid sha256:e9cc59768b7b21d735889d4108a545d374ae1d9ad2cd60655fa4a0f8eb50c99d
+size 60713
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ab6ca01ca7959e4b4998517d3c97436f9d645dab57e4c3b8d5d9868c29781505
-size 55665
+oid sha256:73af771dbfaa672bb1a167184fbb79c78da8b3aabb69a49dcd969445780c4f4a
+size 59556
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--ignore-time-2-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9ddb43adff019c349c934a8e852b81c25fdf229ccbb9c8cc948cebf718cb832d
-size 55315
+oid sha256:911ba5f06d853ffdcbc5b2d786d01d8833282f6f36b0756835529cf6cc0c9e49
+size 59310
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9e173bcb8625fb0303a150fb53a75771fe42840eac2a2f2d3d970fe500f5b8a6
-size 51098
+oid sha256:6be26ef6c4cddea700f2ca9fc7b49a37eb2fb07419d56753ebee1de3efec0c2d
+size 54930
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--preview-range-hover-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c0002bb50b60e5a3db43c419b9bcbf8b8777d32bd2131f8e10d3481d0ce63995
-size 50858
+oid sha256:2da1553c9e3b1d14be61d50076b45e41e632c5cf2f3ff8c8ada4066d61da0c1f
+size 54645
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:80959ac3d4356416a66212ca57244a04d85b180d9bf46dd98d03edb52195fb04
-size 50207
+oid sha256:468a1209d923133db5476b3cd2e9b6ce442802eb791a60ad754f274d5683c082
+size 54042
diff --git a/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-light-linux.png b/playwright/snapshots/si-daterange.spec.ts-snapshots/si-datepicker--si-date-range-playground--selection-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:457214b690d02c02517fe2ded2e3b714c1fb8553cd01ce666478c23447b31427
-size 50056
+oid sha256:1ce9323baaadd74b17909607b68510e61cce3835fa4fa65b719d44d2b413d943
+size 53880
diff --git a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--initial-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--initial-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:294fba11d327569d79b0562e34c4e177336dcae7853cb962e257727e30c61edc
-size 17117
+oid sha256:dcf22643998092cf57c330c53ed3f1ccfa0e29da38cc2c582d36ed497604fb6f
+size 16976
diff --git a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--initial-element-examples-chromium-light-linux.png b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--initial-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:94a73fd2aa92e2682fa0e43352fa936faf606e27f4f8294cd8b06cdfe0d36380
-size 16847
+oid sha256:c7aec53f75167ffc416a1dc17ff6b968775b5a0a937b40d91716674f2d23b903
+size 16673
diff --git a/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--l-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--l-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eab0f588d8dab2713e181d21baf03f8d619927aaebc08f4aa8d188d83c978005
-size 45069
+oid sha256:c9549aeadf1a492b9a7c4b6234b4bb30739b50f7fa3f18222cf5bd3bd0662eff
+size 44948
diff --git a/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--l-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--l-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9ee868027ee430935b8552cf2ba498b4ed729ee079c61361e380e7666e71b8d2
-size 44033
+oid sha256:bb6dd282730500849b2221b30cab76783d2350ee314507eec6fe51459573a52e
+size 43932
diff --git a/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--s-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--s-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b8ce96467f316c22a5c68984cd7fbbe0697fecccabea8eadfb6c52941e4c1e2
-size 38031
+oid sha256:e1c0e193e47f0577cb27a4e9eca46531b3f7325c2155ba1ee118c9c09786e1cc
+size 37885
diff --git a/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--s-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--s-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3bf1ecf8cf8e9f0fc6d0a591bf37632902259e6042d2d50a94de721756387840
-size 37077
+oid sha256:e90362d5c17e31aa6c7e7b42156f2b07715ee092ae99084064340432a08987af
+size 36945
diff --git a/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--xs-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--xs-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b1ac86c027c3783b89b3078d2d455513b5d253768bb366561482ce7a99f4765
-size 32010
+oid sha256:27ef7d7f009917e8fbc0b0fbef2749a318b5962bcd3c67742a1efbeb87d51c66
+size 31773
diff --git a/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--xs-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filter-bar.spec.ts-snapshots/si-filter-bar--si-filter-bar--xs-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2ddfe9d1a29eb28984f6d8aaaeca08c20014987dd04f47f8859047b111f005a8
-size 31291
+oid sha256:2934ba44b5b58800e0c48d7563d17d76062c531bb1591bb84e084e0aabb2be15
+size 31062
diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f38b07321c9fc05a40133035f38103a561ad6b72bde6a4c81536e7505255ad2
-size 33027
+oid sha256:6f38128061193cb6b5cb6fddca3d3a991e3a530aa176127c818195d669fe800c
+size 33629
diff --git a/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-light-linux.png b/playwright/snapshots/si-filtered-search.spec.ts-snapshots/si-filtered-search--si-filtered-search-playground--datepicker-open-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b590dfaf0a2c09a5a70fba801b173efb690ba835d17e94da86af0e561f9a394
-size 33169
+oid sha256:9c7774b931e43338bcb51f8b3d31e461adc8598445e78f8e19849ced12aec4af
+size 33679
diff --git a/playwright/snapshots/si-menu.spec.ts-snapshots/si-menu--si-menu-bar-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-menu.spec.ts-snapshots/si-menu--si-menu-bar-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e624cb852fb73d0b2868b4cf40dbe53519de7906a7148f8ae323942f096e41a5
-size 10379
+oid sha256:a93967bdc0d6e7683a5e8e354dc0127508a2da1927e38ac879102984fc250eb2
+size 10319
diff --git a/playwright/snapshots/si-menu.spec.ts-snapshots/si-menu--si-menu-bar-element-examples-chromium-light-linux.png b/playwright/snapshots/si-menu.spec.ts-snapshots/si-menu--si-menu-bar-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ff62f7ed5f1c7818cbc0acd0c0c87fdc69ab9d6f84e620fcbd80367db5818e75
-size 10656
+oid sha256:e35cb972686093ce2ba668357b2fad13dac70d3728fef6472851c9b6c0386ba7
+size 10612
diff --git a/playwright/snapshots/si-select.spec.ts-snapshots/si-select--si-select--custom-template-element-examples-chromium-light-linux.png b/playwright/snapshots/si-select.spec.ts-snapshots/si-select--si-select--custom-template-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:50230db3b9cbf196f66218040b2d6ffb56a1defa7b25f9d0cbd0145bafcb0f92
-size 32038
+oid sha256:bdd57e8c5640f2b6b200a14df9bab6407027567074d5fd7b881509b3230b2f2b
+size 32055
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dbfad81db60b296e582ff285741830d7fc9a3223e2a51881b9390f350fdee6d6
-size 46823
+oid sha256:604029968b0f0b53a979dfbabe60502e0e977c5d7e55cfbdb49c9e4b6e976b43
+size 46740
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67e2ae788f82664b50dd62812eaaf94e71f45e33c181b2d9e6432ec1e19dfec8
-size 45272
+oid sha256:854c8533026cb932a9b388907e2f6c63d03d429bbff0db85a99293d9a34ab865
+size 45251
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:99b82aa01d9971895b37276cfd78b082f346296343da6c92d095fcc6c16940e3
-size 22110
+oid sha256:b5911de287e2ad6577ffe75c50dafb37acd1d3e93774af51ed555bb2f01e8db8
+size 21644
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-content-action-bar--si-content-action-bar-states-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cda75af01f815c0a785670a89ceda59fa535e1f5bf6f1281ecc83eb62468762d
-size 22135
+oid sha256:b52a42ecb55473002e41312953863d801682bb35836ec4fcb72dbeffaf68d83a
+size 21790
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-summary-chip--si-summary-chip-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-summary-chip--si-summary-chip-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f1c2e87e72b16c64e4557130aed2944dd1593e8f24d3b649e424894f4b0c16a7
-size 26563
+oid sha256:6133cef6e6dba1bae81ee2aca067b256575f27b7b15edfcffd23de9f4769d8de
+size 26235
diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-summary-chip--si-summary-chip-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-summary-chip--si-summary-chip-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:40c3d99ef5a77adb762a1a7f5f81aa792a5822571ddf6f473328a1ce6bb8d33a
-size 26216
+oid sha256:9fcbad29a0f90e3864427fb6f8646f7dd3a8eab9d7d7801bfedb167dff11471a
+size 25960
diff --git a/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--disabled-steps-element-examples-chromium-dark-linux.png b/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--disabled-steps-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:531f56c429261cc3c4420db546a5c6326dba2fa43ab821fd0e45bcf45673c5f6
-size 13456
+oid sha256:571793d095199ea2df775adf929388cb808bee8fb2b2f19b1cc9c8655f421e40
+size 13530
diff --git a/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--disabled-steps-element-examples-chromium-light-linux.png b/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--disabled-steps-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6a5c67c853d96a874fde2595d1d63624a7e3bcd27192533ba714b293f74c21f2
-size 13474
+oid sha256:18101e579e8c8b1e4f00dbe2ada2405725aa57098967d131260c5f7154304a2b
+size 13510
diff --git a/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--focus-element-examples-chromium-dark-linux.png b/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--focus-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0aee2efdf21b2bfa1ffe031acc199454cecb599576423619fefc58fa89138710
-size 14145
+oid sha256:65e9ac213e1f39e6155b4e80abd8b440fcc6988902d1b4203256ae7cb6d532e7
+size 14258
diff --git a/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--focus-element-examples-chromium-light-linux.png b/playwright/snapshots/wizard-vertical.spec.ts-snapshots/si-wizard--si-wizard-playground--focus-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d559283d29363b254a27571b644ae10dcbf573441e537323b17e7cd0c759d92b
-size 13961
+oid sha256:8fee544a4100603f54bef70e17a99e193f7aead85b402ec08d5579c896cc1b56
+size 14057
diff --git a/projects/element-ng/avatar/si-avatar.component.scss b/projects/element-ng/avatar/si-avatar.component.scss
@@ -67,14 +67,7 @@ img {
   inset-inline-end: var(--indicator-offset-x);
   font-size: var(--indicator-size);
 
-  .drop-shadow {
-    ::ng-deep {
-      svg {
-        filter: drop-shadow(1px 0 0 variables.$element-base-1)
-          drop-shadow(-1px 0 0 variables.$element-base-1)
-          drop-shadow(0 1px 0 variables.$element-base-1)
-          drop-shadow(0 -1px 0 variables.$element-base-1);
-      }
-    }
-  }
+  filter: drop-shadow(1px 0 0 variables.$element-base-1)
+    drop-shadow(-1px 0 0 variables.$element-base-1) drop-shadow(0 1px 0 variables.$element-base-1)
+    drop-shadow(0 -1px 0 variables.$element-base-1);
 }
diff --git a/projects/element-ng/icon/si-icon.component.scss b/projects/element-ng/icon/si-icon.component.scss
@@ -3,10 +3,14 @@
   font-weight: normal;
   vertical-align: middle;
   line-height: 1;
+}
 
-  ::ng-deep svg {
-    display: block;
-    block-size: 1em;
-    fill: currentColor;
-  }
+.svg-element-icon {
+  background-color: currentColor;
+  mask-image: var(--svg-element-icon);
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  mask-position: center;
+  block-size: 1em;
+  inline-size: 1em;
 }
diff --git a/projects/element-ng/icon/si-icon.component.spec.ts b/projects/element-ng/icon/si-icon.component.spec.ts
@@ -19,6 +19,11 @@ describe('SiSvgIconComponent', () => {
     let component: TestHostComponent;
     let fixture: ComponentFixture<TestHostComponent>;
 
+    const getIconHostStyle = (): string =>
+      (fixture.nativeElement.querySelector('si-icon') as HTMLElement).style.getPropertyValue(
+        '--svg-element-icon'
+      );
+
     @Component({
       imports: [SiIconComponent],
       template: ` <si-icon [icon]="icon()" />`
@@ -60,7 +65,7 @@ describe('SiSvgIconComponent', () => {
         });
 
         it('should load icon', () => {
-          expect(document.getElementById('svg-2')).toBeTruthy();
+          expect(getIconHostStyle()).toContain('svg-2');
         });
 
         it('should load icon override from theme', () => {
@@ -74,7 +79,7 @@ describe('SiSvgIconComponent', () => {
             }
           });
           fixture.detectChanges();
-          expect(document.getElementById('svg-oem')).toBeTruthy();
+          expect(getIconHostStyle()).toContain('svg-oem');
         });
       });
 
@@ -85,7 +90,7 @@ describe('SiSvgIconComponent', () => {
         });
 
         it('should load icon', () => {
-          expect(document.getElementById('svg')).toBeTruthy();
+          expect(getIconHostStyle()).toContain('svg');
         });
 
         it('should load icon override from theme', () => {
@@ -99,7 +104,7 @@ describe('SiSvgIconComponent', () => {
             }
           });
           fixture.detectChanges();
-          expect(document.getElementById('svg-oem')).toBeTruthy();
+          expect(getIconHostStyle()).toContain('svg-oem');
         });
       });
     });
@@ -114,7 +119,7 @@ describe('SiSvgIconComponent', () => {
       it('should always use the icon-font', () => {
         component.icon.set('element-svg');
         fixture.detectChanges();
-        expect(document.getElementById('svg')).toBeFalsy();
+        expect(getIconHostStyle()).toBe('');
         expect(fixture.debugElement.query(By.css('.element-svg'))).toBeTruthy();
       });
     });
diff --git a/projects/element-ng/icon/si-icon.component.ts b/projects/element-ng/icon/si-icon.component.ts
diff --git a/projects/element-ng/icon/si-icons.ts b/projects/element-ng/icon/si-icons.ts
diff --git a/projects/element-ng/theme/si-theme.service.ts b/projects/element-ng/theme/si-theme.service.ts
