diff --git a/docs/core/icon.component.md b/docs/core/icon.component.md
index 48bc40567e..64d4f6ccea 100644
--- a/docs/core/icon.component.md
+++ b/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
 
diff --git a/lib/core/icon/icon.component.html b/lib/core/icon/icon.component.html
index ba5b060d27..535f385fa2 100644
--- a/lib/core/icon/icon.component.html
+++ b/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>
diff --git a/lib/core/icon/icon.component.ts b/lib/core/icon/icon.component.ts
index 1bebdfb4ae..4f1c74c66a 100644
--- a/lib/core/icon/icon.component.ts
+++ b/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;
     }