expose icon color property (#4248)

docs/core/icon.component.md

@@ -28,7 +28,8 @@ Provides a universal way of rendering registered and named icons.
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| value | `string` |  | Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`. |
+| value | `string` | | Icon value, which can be either a ligature name or a custom icon in the format `[namespace]:[name]`. |
+| color | ThemePalette | |Theme color palette for the component. |
 
 ## Details
 

lib/core/icon/icon.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="isCustom; else: default">
-  <mat-icon [svgIcon]="value"></mat-icon>
+  <mat-icon [color]="color" [svgIcon]="value"></mat-icon>
 </ng-container>
 
 <ng-template #default>
-  <mat-icon>{{ value }}</mat-icon>
+  <mat-icon [color]="color">{{ value }}</mat-icon>
 </ng-template>

lib/core/icon/icon.component.ts

@@ -22,6 +22,7 @@ import {
     ChangeDetectionStrategy
 } from '@angular/core';
 import { ThumbnailService } from '../services/thumbnail.service';
+import { ThemePalette } from '@angular/material';
 
 @Component({
     selector: 'adf-icon',
@@ -35,6 +36,9 @@ export class IconComponent {
     private _value = '';
     private _isCustom = false;
 
+    @Input()
+    color: ThemePalette;
+
     get value(): string {
         return this._value;
     }