feat: support icons with custom colors in select (#600)

Author: arjunlalb

projects/common/src/color/color.ts

@@ -12,6 +12,7 @@ export const enum Color {
   Gray5 = '#657277',
   Gray7 = '#272c2e',
   Gray9 = '#080909',
+  Green3 = '#95EABE',
   Orange3 = '#FDC088',
   Orange5 = '#fb8b24',
   Purple2 = '#f2d0f5',
@@ -23,5 +24,6 @@ export const enum Color {
   Red3 = '#FEA395',
   Red5 = '#FD5138',
   Red6 = '#F72202',
-  Brown1 = '#9e4c41'
+  Brown1 = '#9e4c41',
+  White = '#FFFFFF'
 }

projects/components/src/select/select.component.scss

@@ -134,6 +134,16 @@
     align-items: center;
     justify-content: space-between;
 
+    .select-option-info {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      & > * {
+        margin-right: 8px;
+      }
+    }
+
     .label {
       padding-right: 8px;
     }

projects/components/src/select/select.component.ts

@@ -97,8 +97,17 @@ import { SelectSize } from './select-size';
               class="select-option"
               [ngClass]="this.size"
             >
-              <ht-icon *ngIf="item.icon" class="icon" [icon]="item.icon" size="${IconSize.Small}"> </ht-icon>
-              <span class="label">{{ item.label }}</span>
+              <div class="select-option-info">
+                <ht-icon
+                  *ngIf="item.icon"
+                  class="icon"
+                  [icon]="item.icon"
+                  size="${IconSize.Small}"
+                  [color]="item.iconColor"
+                >
+                </ht-icon>
+                <span class="label">{{ item.label }}</span>
+              </div>
               <ht-icon
                 class="status-icon"
                 *ngIf="showSelectionStatus && this.highlightSelected && this.isSelectedItem(item)"