fix: Added filters for icons for theme compatibility (#410)

Author: tammy-a11y

packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-summary-item/material-summary-item.component.scss

@@ -62,6 +62,7 @@
 .psdk-utility-card-icon {
   flex-grow: 1;
   max-width: 2.813rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility-card-svg-icon {
@@ -107,4 +108,5 @@
   width: 1.4rem;
   display: inline-block;
   vertical-align: bottom;
+  filter: var(--app-primary-color-filter);
 }

packages/angular-sdk-components/src/lib/_components/infra/stages/stages.component.html

@@ -1,7 +1,8 @@
 <div class="psdk-stages-bar">
   <div class="psdk-stages-chevron" *ngFor="let stage of arStageResults$">
     <div *ngIf="stage.visited_status == 'completed'" class="psdk-stages-inner-past">
-      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />
+      <div>{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}</div>
     </div>
     <div *ngIf="stage.visited_status == 'active'" class="psdk-stages-inner-present">
       {{ localizationService.getLocalizedText(stage.name) }}

packages/angular-sdk-components/src/lib/_components/infra/stages/stages.component.scss

@@ -21,9 +21,11 @@
 }
 
 .psdk-stages-icon {
-  width: 1.4rem;
+  width: 18px;
   display: inline-block;
   vertical-align: top;
+  filter: var(--app-primary-color-filter);
+  margin-right: 2px;
 }
 
 .psdk-stages-bar {
@@ -66,6 +68,8 @@
 .psdk-stages-inner-past {
   color: var(--mat-sys-outline-variant);
   font-size: 1rem;
+  display: flex;
+  align-items: center;
 }
 
 .psdk-stages-inner-present {

packages/angular-sdk-components/src/lib/_components/widget/attachment/attachment.component.scss

@@ -126,6 +126,7 @@
 
 .psdk-attachment-card-svg-icon {
   width: 2.5rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-utility-button {
@@ -138,6 +139,7 @@
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
   display: inline-block;
+  filter: var(--app-primary-color-filter);
 }
 
 .file-div {

packages/angular-sdk-components/src/lib/_components/widget/list-utility/list-utility.component.scss

@@ -63,6 +63,7 @@
 .psdk-utility-svg-icon {
   width: 1.4rem;
   display: inline-block;
+  filter: var(--app-primary-color-filter);
 }
 
 .psdk-settings-svg-icon {