@getflip/swirl-components-angular 0.149.0 → 0.150.0

package/projects/component-library/src/lib/stencil-generated/components.ts

@@ -1253,13 +1253,13 @@ export declare interface SwirlIcon extends Components.SwirlIcon {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['glyph', 'size']
+  inputs: ['color', 'glyph', 'size']
 })
 @Component({
   selector: 'swirl-icon',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['glyph', 'size']
+  inputs: ['color', 'glyph', 'size']
 })
 export class SwirlIcon {
   protected el: HTMLElement;
@@ -1274,13 +1274,13 @@ export declare interface SwirlIconAdd extends Components.SwirlIconAdd {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-add',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconAdd {
   protected el: HTMLElement;
@@ -1295,13 +1295,13 @@ export declare interface SwirlIconAddPhoto extends Components.SwirlIconAddPhoto
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-add-photo',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconAddPhoto {
   protected el: HTMLElement;
@@ -1316,13 +1316,13 @@ export declare interface SwirlIconAddReaction extends Components.SwirlIconAddRea
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-add-reaction',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconAddReaction {
   protected el: HTMLElement;
@@ -1337,13 +1337,13 @@ export declare interface SwirlIconAdminPanelSettings extends Components.SwirlIco
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-admin-panel-settings',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconAdminPanelSettings {
   protected el: HTMLElement;
@@ -1358,13 +1358,13 @@ export declare interface SwirlIconAi extends Components.SwirlIconAi {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-ai',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconAi {
   protected el: HTMLElement;
@@ -1379,13 +1379,13 @@ export declare interface SwirlIconApps extends Components.SwirlIconApps {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-apps',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconApps {
   protected el: HTMLElement;
@@ -1400,13 +1400,13 @@ export declare interface SwirlIconArrowBack extends Components.SwirlIconArrowBac
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-back',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowBack {
   protected el: HTMLElement;
@@ -1421,13 +1421,13 @@ export declare interface SwirlIconArrowDownward extends Components.SwirlIconArro
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-downward',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowDownward {
   protected el: HTMLElement;
@@ -1442,13 +1442,13 @@ export declare interface SwirlIconArrowForward extends Components.SwirlIconArrow
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-forward',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowForward {
   protected el: HTMLElement;
@@ -1463,13 +1463,13 @@ export declare interface SwirlIconArrowLeft extends Components.SwirlIconArrowLef
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-left',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowLeft {
   protected el: HTMLElement;
@@ -1484,13 +1484,13 @@ export declare interface SwirlIconArrowRight extends Components.SwirlIconArrowRi
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-right',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowRight {
   protected el: HTMLElement;
@@ -1505,13 +1505,13 @@ export declare interface SwirlIconArrowRightSmall extends Components.SwirlIconAr
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-right-small',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowRightSmall {
   protected el: HTMLElement;
@@ -1526,13 +1526,13 @@ export declare interface SwirlIconArrowUpward extends Components.SwirlIconArrowU
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-arrow-upward',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconArrowUpward {
   protected el: HTMLElement;
@@ -1547,13 +1547,13 @@ export declare interface SwirlIconAttachment extends Components.SwirlIconAttachm
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-attachment',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconAttachment {
   protected el: HTMLElement;
@@ -1568,13 +1568,13 @@ export declare interface SwirlIconBarChart extends Components.SwirlIconBarChart
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-bar-chart',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconBarChart {
   protected el: HTMLElement;
@@ -1589,13 +1589,13 @@ export declare interface SwirlIconBlock extends Components.SwirlIconBlock {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-block',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconBlock {
   protected el: HTMLElement;
@@ -1610,13 +1610,13 @@ export declare interface SwirlIconBookmark extends Components.SwirlIconBookmark
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-bookmark',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconBookmark {
   protected el: HTMLElement;
@@ -1631,13 +1631,13 @@ export declare interface SwirlIconBookmarkFilled extends Components.SwirlIconBoo
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-bookmark-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconBookmarkFilled {
   protected el: HTMLElement;
@@ -1652,13 +1652,13 @@ export declare interface SwirlIconCancel extends Components.SwirlIconCancel {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-cancel',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCancel {
   protected el: HTMLElement;
@@ -1673,13 +1673,13 @@ export declare interface SwirlIconChatBubble extends Components.SwirlIconChatBub
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-chat-bubble',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconChatBubble {
   protected el: HTMLElement;
@@ -1694,13 +1694,13 @@ export declare interface SwirlIconChatsFilled extends Components.SwirlIconChatsF
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-chats-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconChatsFilled {
   protected el: HTMLElement;
@@ -1715,13 +1715,13 @@ export declare interface SwirlIconChatsOutlined extends Components.SwirlIconChat
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-chats-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconChatsOutlined {
   protected el: HTMLElement;
@@ -1736,13 +1736,13 @@ export declare interface SwirlIconCheck extends Components.SwirlIconCheck {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-check',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCheck {
   protected el: HTMLElement;
@@ -1757,13 +1757,13 @@ export declare interface SwirlIconCheckCircle extends Components.SwirlIconCheckC
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-check-circle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCheckCircle {
   protected el: HTMLElement;
@@ -1778,13 +1778,13 @@ export declare interface SwirlIconCheckSmall extends Components.SwirlIconCheckSm
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-check-small',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCheckSmall {
   protected el: HTMLElement;
@@ -1799,13 +1799,13 @@ export declare interface SwirlIconCheckStrong extends Components.SwirlIconCheckS
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-check-strong',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCheckStrong {
   protected el: HTMLElement;
@@ -1820,13 +1820,13 @@ export declare interface SwirlIconChevronLeft extends Components.SwirlIconChevro
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-chevron-left',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconChevronLeft {
   protected el: HTMLElement;
@@ -1841,13 +1841,13 @@ export declare interface SwirlIconChevronRight extends Components.SwirlIconChevr
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-chevron-right',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconChevronRight {
   protected el: HTMLElement;
@@ -1862,13 +1862,13 @@ export declare interface SwirlIconClose extends Components.SwirlIconClose {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-close',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconClose {
   protected el: HTMLElement;
@@ -1883,13 +1883,13 @@ export declare interface SwirlIconCloseSmall extends Components.SwirlIconCloseSm
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-close-small',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCloseSmall {
   protected el: HTMLElement;
@@ -1904,13 +1904,13 @@ export declare interface SwirlIconCloudUpload extends Components.SwirlIconCloudU
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-cloud-upload',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCloudUpload {
   protected el: HTMLElement;
@@ -1925,13 +1925,13 @@ export declare interface SwirlIconColumn extends Components.SwirlIconColumn {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-column',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconColumn {
   protected el: HTMLElement;
@@ -1946,13 +1946,13 @@ export declare interface SwirlIconComment extends Components.SwirlIconComment {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-comment',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconComment {
   protected el: HTMLElement;
@@ -1967,13 +1967,13 @@ export declare interface SwirlIconCopy extends Components.SwirlIconCopy {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-copy',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconCopy {
   protected el: HTMLElement;
@@ -1988,13 +1988,13 @@ export declare interface SwirlIconDarkMode extends Components.SwirlIconDarkMode
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-dark-mode',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDarkMode {
   protected el: HTMLElement;
@@ -2009,13 +2009,13 @@ export declare interface SwirlIconDateRange extends Components.SwirlIconDateRang
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-date-range',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDateRange {
   protected el: HTMLElement;
@@ -2030,13 +2030,13 @@ export declare interface SwirlIconDelete extends Components.SwirlIconDelete {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-delete',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDelete {
   protected el: HTMLElement;
@@ -2051,13 +2051,13 @@ export declare interface SwirlIconDescription extends Components.SwirlIconDescri
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-description',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDescription {
   protected el: HTMLElement;
@@ -2072,13 +2072,13 @@ export declare interface SwirlIconDirectoryFilled extends Components.SwirlIconDi
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-directory-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDirectoryFilled {
   protected el: HTMLElement;
@@ -2093,13 +2093,13 @@ export declare interface SwirlIconDirectoryOutlined extends Components.SwirlIcon
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-directory-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDirectoryOutlined {
   protected el: HTMLElement;
@@ -2114,13 +2114,13 @@ export declare interface SwirlIconDiscover extends Components.SwirlIconDiscover
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-discover',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDiscover {
   protected el: HTMLElement;
@@ -2135,13 +2135,13 @@ export declare interface SwirlIconDockLeft extends Components.SwirlIconDockLeft
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-dock-left',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDockLeft {
   protected el: HTMLElement;
@@ -2156,13 +2156,13 @@ export declare interface SwirlIconDot extends Components.SwirlIconDot {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-dot',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDot {
   protected el: HTMLElement;
@@ -2177,13 +2177,13 @@ export declare interface SwirlIconDoubleArrowLeft extends Components.SwirlIconDo
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-double-arrow-left',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDoubleArrowLeft {
   protected el: HTMLElement;
@@ -2198,13 +2198,13 @@ export declare interface SwirlIconDoubleArrowRight extends Components.SwirlIconD
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-double-arrow-right',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDoubleArrowRight {
   protected el: HTMLElement;
@@ -2219,13 +2219,13 @@ export declare interface SwirlIconDownload extends Components.SwirlIconDownload
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-download',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDownload {
   protected el: HTMLElement;
@@ -2240,13 +2240,13 @@ export declare interface SwirlIconDragHandle extends Components.SwirlIconDragHan
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-drag-handle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconDragHandle {
   protected el: HTMLElement;
@@ -2261,13 +2261,13 @@ export declare interface SwirlIconEdit extends Components.SwirlIconEdit {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-edit',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconEdit {
   protected el: HTMLElement;
@@ -2282,13 +2282,13 @@ export declare interface SwirlIconEmojiMood extends Components.SwirlIconEmojiMoo
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-emoji-mood',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconEmojiMood {
   protected el: HTMLElement;
@@ -2303,13 +2303,13 @@ export declare interface SwirlIconEmojiSatisfied extends Components.SwirlIconEmo
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-emoji-satisfied',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconEmojiSatisfied {
   protected el: HTMLElement;
@@ -2324,13 +2324,13 @@ export declare interface SwirlIconError extends Components.SwirlIconError {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-error',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconError {
   protected el: HTMLElement;
@@ -2345,13 +2345,13 @@ export declare interface SwirlIconExpandLess extends Components.SwirlIconExpandL
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-expand-less',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconExpandLess {
   protected el: HTMLElement;
@@ -2366,13 +2366,13 @@ export declare interface SwirlIconExpandMore extends Components.SwirlIconExpandM
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-expand-more',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconExpandMore {
   protected el: HTMLElement;
@@ -2387,13 +2387,13 @@ export declare interface SwirlIconFile extends Components.SwirlIconFile {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-file',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFile {
   protected el: HTMLElement;
@@ -2408,13 +2408,13 @@ export declare interface SwirlIconFileCopy extends Components.SwirlIconFileCopy
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-file-copy',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFileCopy {
   protected el: HTMLElement;
@@ -2429,13 +2429,13 @@ export declare interface SwirlIconFilter extends Components.SwirlIconFilter {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-filter',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFilter {
   protected el: HTMLElement;
@@ -2450,13 +2450,13 @@ export declare interface SwirlIconFolder extends Components.SwirlIconFolder {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-folder',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFolder {
   protected el: HTMLElement;
@@ -2471,13 +2471,13 @@ export declare interface SwirlIconFolderShared extends Components.SwirlIconFolde
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-folder-shared',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFolderShared {
   protected el: HTMLElement;
@@ -2492,13 +2492,13 @@ export declare interface SwirlIconFormatHOne extends Components.SwirlIconFormatH
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-format-h-one',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFormatHOne {
   protected el: HTMLElement;
@@ -2513,13 +2513,13 @@ export declare interface SwirlIconFullscreen extends Components.SwirlIconFullscr
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-fullscreen',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFullscreen {
   protected el: HTMLElement;
@@ -2534,13 +2534,13 @@ export declare interface SwirlIconFullscreenExit extends Components.SwirlIconFul
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-fullscreen-exit',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconFullscreenExit {
   protected el: HTMLElement;
@@ -2555,13 +2555,13 @@ export declare interface SwirlIconGif extends Components.SwirlIconGif {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-gif',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGif {
   protected el: HTMLElement;
@@ -2576,13 +2576,13 @@ export declare interface SwirlIconGroupAdd extends Components.SwirlIconGroupAdd
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-group-add',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGroupAdd {
   protected el: HTMLElement;
@@ -2597,13 +2597,13 @@ export declare interface SwirlIconGroupAssign extends Components.SwirlIconGroupA
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-group-assign',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGroupAssign {
   protected el: HTMLElement;
@@ -2618,13 +2618,13 @@ export declare interface SwirlIconGroups extends Components.SwirlIconGroups {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-groups',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGroups {
   protected el: HTMLElement;
@@ -2639,13 +2639,13 @@ export declare interface SwirlIconGroupsCustom extends Components.SwirlIconGroup
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-groups-custom',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGroupsCustom {
   protected el: HTMLElement;
@@ -2660,13 +2660,13 @@ export declare interface SwirlIconGroupsFilled extends Components.SwirlIconGroup
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-groups-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGroupsFilled {
   protected el: HTMLElement;
@@ -2681,13 +2681,13 @@ export declare interface SwirlIconGroupsOutlined extends Components.SwirlIconGro
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-groups-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconGroupsOutlined {
   protected el: HTMLElement;
@@ -2702,13 +2702,13 @@ export declare interface SwirlIconHelp extends Components.SwirlIconHelp {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-help',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconHelp {
   protected el: HTMLElement;
@@ -2723,13 +2723,13 @@ export declare interface SwirlIconHighlight extends Components.SwirlIconHighligh
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-highlight',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconHighlight {
   protected el: HTMLElement;
@@ -2744,13 +2744,13 @@ export declare interface SwirlIconHome extends Components.SwirlIconHome {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-home',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconHome {
   protected el: HTMLElement;
@@ -2765,13 +2765,13 @@ export declare interface SwirlIconImage extends Components.SwirlIconImage {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-image',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconImage {
   protected el: HTMLElement;
@@ -2786,13 +2786,13 @@ export declare interface SwirlIconImproveText extends Components.SwirlIconImprov
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-improve-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconImproveText {
   protected el: HTMLElement;
@@ -2807,13 +2807,13 @@ export declare interface SwirlIconInfo extends Components.SwirlIconInfo {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-info',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconInfo {
   protected el: HTMLElement;
@@ -2828,13 +2828,13 @@ export declare interface SwirlIconInsertBelow extends Components.SwirlIconInsert
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-insert-below',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconInsertBelow {
   protected el: HTMLElement;
@@ -2849,13 +2849,13 @@ export declare interface SwirlIconInsertOnTop extends Components.SwirlIconInsert
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-insert-on-top',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconInsertOnTop {
   protected el: HTMLElement;
@@ -2870,13 +2870,13 @@ export declare interface SwirlIconInventory extends Components.SwirlIconInventor
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-inventory',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconInventory {
   protected el: HTMLElement;
@@ -2891,13 +2891,13 @@ export declare interface SwirlIconLightMode extends Components.SwirlIconLightMod
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-light-mode',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLightMode {
   protected el: HTMLElement;
@@ -2912,13 +2912,13 @@ export declare interface SwirlIconLike extends Components.SwirlIconLike {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-like',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLike {
   protected el: HTMLElement;
@@ -2933,13 +2933,13 @@ export declare interface SwirlIconLink extends Components.SwirlIconLink {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-link',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLink {
   protected el: HTMLElement;
@@ -2954,13 +2954,13 @@ export declare interface SwirlIconLock extends Components.SwirlIconLock {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-lock',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLock {
   protected el: HTMLElement;
@@ -2975,13 +2975,13 @@ export declare interface SwirlIconLockOpen extends Components.SwirlIconLockOpen
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-lock-open',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLockOpen {
   protected el: HTMLElement;
@@ -2996,13 +2996,13 @@ export declare interface SwirlIconLockPerson extends Components.SwirlIconLockPer
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-lock-person',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLockPerson {
   protected el: HTMLElement;
@@ -3017,13 +3017,13 @@ export declare interface SwirlIconLogout extends Components.SwirlIconLogout {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-logout',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLogout {
   protected el: HTMLElement;
@@ -3038,13 +3038,13 @@ export declare interface SwirlIconLongText extends Components.SwirlIconLongText
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-long-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconLongText {
   protected el: HTMLElement;
@@ -3059,13 +3059,13 @@ export declare interface SwirlIconMail extends Components.SwirlIconMail {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-mail',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMail {
   protected el: HTMLElement;
@@ -3080,13 +3080,13 @@ export declare interface SwirlIconManageAccounts extends Components.SwirlIconMan
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-manage-accounts',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconManageAccounts {
   protected el: HTMLElement;
@@ -3101,13 +3101,13 @@ export declare interface SwirlIconMarkChatRead extends Components.SwirlIconMarkC
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-mark-chat-read',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMarkChatRead {
   protected el: HTMLElement;
@@ -3122,13 +3122,13 @@ export declare interface SwirlIconMarkChatUnread extends Components.SwirlIconMar
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-mark-chat-unread',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMarkChatUnread {
   protected el: HTMLElement;
@@ -3143,13 +3143,13 @@ export declare interface SwirlIconMention extends Components.SwirlIconMention {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-mention',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMention {
   protected el: HTMLElement;
@@ -3164,13 +3164,13 @@ export declare interface SwirlIconMenu extends Components.SwirlIconMenu {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMenu {
   protected el: HTMLElement;
@@ -3185,13 +3185,13 @@ export declare interface SwirlIconMenuBook extends Components.SwirlIconMenuBook
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-menu-book',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMenuBook {
   protected el: HTMLElement;
@@ -3206,13 +3206,13 @@ export declare interface SwirlIconMenuFilled extends Components.SwirlIconMenuFil
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-menu-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMenuFilled {
   protected el: HTMLElement;
@@ -3227,13 +3227,13 @@ export declare interface SwirlIconMenuOutlined extends Components.SwirlIconMenuO
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-menu-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMenuOutlined {
   protected el: HTMLElement;
@@ -3248,13 +3248,13 @@ export declare interface SwirlIconMessage extends Components.SwirlIconMessage {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-message',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMessage {
   protected el: HTMLElement;
@@ -3269,13 +3269,13 @@ export declare interface SwirlIconMic extends Components.SwirlIconMic {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-mic',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMic {
   protected el: HTMLElement;
@@ -3290,13 +3290,13 @@ export declare interface SwirlIconMoreHorizontal extends Components.SwirlIconMor
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-more-horizontal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMoreHorizontal {
   protected el: HTMLElement;
@@ -3311,13 +3311,13 @@ export declare interface SwirlIconMoreVertikal extends Components.SwirlIconMoreV
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-more-vertikal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconMoreVertikal {
   protected el: HTMLElement;
@@ -3332,13 +3332,13 @@ export declare interface SwirlIconNewsFilled extends Components.SwirlIconNewsFil
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-news-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconNewsFilled {
   protected el: HTMLElement;
@@ -3353,13 +3353,13 @@ export declare interface SwirlIconNewsOutlined extends Components.SwirlIconNewsO
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-news-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconNewsOutlined {
   protected el: HTMLElement;
@@ -3374,13 +3374,13 @@ export declare interface SwirlIconNotifications extends Components.SwirlIconNoti
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-notifications',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconNotifications {
   protected el: HTMLElement;
@@ -3395,13 +3395,13 @@ export declare interface SwirlIconNotificationsActive extends Components.SwirlIc
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-notifications-active',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconNotificationsActive {
   protected el: HTMLElement;
@@ -3416,13 +3416,13 @@ export declare interface SwirlIconNotificationsOff extends Components.SwirlIconN
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-notifications-off',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconNotificationsOff {
   protected el: HTMLElement;
@@ -3437,13 +3437,13 @@ export declare interface SwirlIconOpenInFull extends Components.SwirlIconOpenInF
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-open-in-full',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconOpenInFull {
   protected el: HTMLElement;
@@ -3458,13 +3458,13 @@ export declare interface SwirlIconOpenInNew extends Components.SwirlIconOpenInNe
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-open-in-new',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconOpenInNew {
   protected el: HTMLElement;
@@ -3479,13 +3479,13 @@ export declare interface SwirlIconPause extends Components.SwirlIconPause {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-pause',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPause {
   protected el: HTMLElement;
@@ -3500,13 +3500,13 @@ export declare interface SwirlIconPauseCircle extends Components.SwirlIconPauseC
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-pause-circle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPauseCircle {
   protected el: HTMLElement;
@@ -3521,13 +3521,13 @@ export declare interface SwirlIconPeopleAlt extends Components.SwirlIconPeopleAl
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-people-alt',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPeopleAlt {
   protected el: HTMLElement;
@@ -3542,13 +3542,13 @@ export declare interface SwirlIconPerson extends Components.SwirlIconPerson {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-person',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPerson {
   protected el: HTMLElement;
@@ -3563,13 +3563,13 @@ export declare interface SwirlIconPersonOff extends Components.SwirlIconPersonOf
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-person-off',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPersonOff {
   protected el: HTMLElement;
@@ -3584,13 +3584,13 @@ export declare interface SwirlIconPhone extends Components.SwirlIconPhone {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-phone',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPhone {
   protected el: HTMLElement;
@@ -3605,13 +3605,13 @@ export declare interface SwirlIconPhotoCamera extends Components.SwirlIconPhotoC
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-photo-camera',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPhotoCamera {
   protected el: HTMLElement;
@@ -3626,13 +3626,13 @@ export declare interface SwirlIconPlayArrow extends Components.SwirlIconPlayArro
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-play-arrow',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPlayArrow {
   protected el: HTMLElement;
@@ -3647,13 +3647,13 @@ export declare interface SwirlIconPoll extends Components.SwirlIconPoll {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-poll',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPoll {
   protected el: HTMLElement;
@@ -3668,13 +3668,13 @@ export declare interface SwirlIconPrint extends Components.SwirlIconPrint {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-print',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconPrint {
   protected el: HTMLElement;
@@ -3689,13 +3689,13 @@ export declare interface SwirlIconRecieved extends Components.SwirlIconRecieved
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-recieved',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconRecieved {
   protected el: HTMLElement;
@@ -3710,13 +3710,13 @@ export declare interface SwirlIconRemove extends Components.SwirlIconRemove {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-remove',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconRemove {
   protected el: HTMLElement;
@@ -3731,13 +3731,13 @@ export declare interface SwirlIconReply extends Components.SwirlIconReply {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-reply',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconReply {
   protected el: HTMLElement;
@@ -3752,13 +3752,13 @@ export declare interface SwirlIconReport extends Components.SwirlIconReport {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-report',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconReport {
   protected el: HTMLElement;
@@ -3773,13 +3773,13 @@ export declare interface SwirlIconRoadmap extends Components.SwirlIconRoadmap {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-roadmap',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconRoadmap {
   protected el: HTMLElement;
@@ -3794,13 +3794,13 @@ export declare interface SwirlIconSearch extends Components.SwirlIconSearch {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-search',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSearch {
   protected el: HTMLElement;
@@ -3815,13 +3815,13 @@ export declare interface SwirlIconSearchStrong extends Components.SwirlIconSearc
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-search-strong',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSearchStrong {
   protected el: HTMLElement;
@@ -3836,13 +3836,13 @@ export declare interface SwirlIconSecure extends Components.SwirlIconSecure {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-secure',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSecure {
   protected el: HTMLElement;
@@ -3857,13 +3857,13 @@ export declare interface SwirlIconSend extends Components.SwirlIconSend {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-send',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSend {
   protected el: HTMLElement;
@@ -3878,13 +3878,13 @@ export declare interface SwirlIconSettings extends Components.SwirlIconSettings
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-settings',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSettings {
   protected el: HTMLElement;
@@ -3899,13 +3899,13 @@ export declare interface SwirlIconShortText extends Components.SwirlIconShortTex
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-short-text',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconShortText {
   protected el: HTMLElement;
@@ -3920,13 +3920,13 @@ export declare interface SwirlIconSimplify extends Components.SwirlIconSimplify
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-simplify',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSimplify {
   protected el: HTMLElement;
@@ -3941,13 +3941,13 @@ export declare interface SwirlIconSpellcheck extends Components.SwirlIconSpellch
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-spellcheck',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSpellcheck {
   protected el: HTMLElement;
@@ -3962,13 +3962,13 @@ export declare interface SwirlIconStop extends Components.SwirlIconStop {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-stop',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconStop {
   protected el: HTMLElement;
@@ -3983,13 +3983,13 @@ export declare interface SwirlIconSync extends Components.SwirlIconSync {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-sync',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconSync {
   protected el: HTMLElement;
@@ -4004,13 +4004,13 @@ export declare interface SwirlIconTasksFilled extends Components.SwirlIconTasksF
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-tasks-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTasksFilled {
   protected el: HTMLElement;
@@ -4025,13 +4025,13 @@ export declare interface SwirlIconTasksOutlined extends Components.SwirlIconTask
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-tasks-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTasksOutlined {
   protected el: HTMLElement;
@@ -4046,13 +4046,13 @@ export declare interface SwirlIconTerminal extends Components.SwirlIconTerminal
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-terminal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTerminal {
   protected el: HTMLElement;
@@ -4067,13 +4067,13 @@ export declare interface SwirlIconTimeFilled extends Components.SwirlIconTimeFil
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-time-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTimeFilled {
   protected el: HTMLElement;
@@ -4088,13 +4088,13 @@ export declare interface SwirlIconTimeOutlined extends Components.SwirlIconTimeO
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-time-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTimeOutlined {
   protected el: HTMLElement;
@@ -4109,13 +4109,13 @@ export declare interface SwirlIconToday extends Components.SwirlIconToday {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-today',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconToday {
   protected el: HTMLElement;
@@ -4130,13 +4130,13 @@ export declare interface SwirlIconTodayOutlined extends Components.SwirlIconToda
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-today-outlined',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTodayOutlined {
   protected el: HTMLElement;
@@ -4151,13 +4151,13 @@ export declare interface SwirlIconTranslate extends Components.SwirlIconTranslat
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-translate',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTranslate {
   protected el: HTMLElement;
@@ -4172,13 +4172,13 @@ export declare interface SwirlIconTreeStructure extends Components.SwirlIconTree
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-tree-structure',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconTreeStructure {
   protected el: HTMLElement;
@@ -4193,13 +4193,13 @@ export declare interface SwirlIconUndo extends Components.SwirlIconUndo {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-undo',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconUndo {
   protected el: HTMLElement;
@@ -4214,13 +4214,13 @@ export declare interface SwirlIconUnlockPerson extends Components.SwirlIconUnloc
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-unlock-person',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconUnlockPerson {
   protected el: HTMLElement;
@@ -4235,13 +4235,13 @@ export declare interface SwirlIconUserAdd extends Components.SwirlIconUserAdd {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-user-add',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconUserAdd {
   protected el: HTMLElement;
@@ -4256,13 +4256,13 @@ export declare interface SwirlIconUserAssign extends Components.SwirlIconUserAss
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-user-assign',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconUserAssign {
   protected el: HTMLElement;
@@ -4277,13 +4277,13 @@ export declare interface SwirlIconVideoCamera extends Components.SwirlIconVideoC
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-video-camera',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconVideoCamera {
   protected el: HTMLElement;
@@ -4298,13 +4298,13 @@ export declare interface SwirlIconVideoLibrary extends Components.SwirlIconVideo
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-video-library',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconVideoLibrary {
   protected el: HTMLElement;
@@ -4319,13 +4319,13 @@ export declare interface SwirlIconVisibility extends Components.SwirlIconVisibil
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-visibility',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconVisibility {
   protected el: HTMLElement;
@@ -4340,13 +4340,13 @@ export declare interface SwirlIconVisibilityOff extends Components.SwirlIconVisi
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-visibility-off',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconVisibilityOff {
   protected el: HTMLElement;
@@ -4361,13 +4361,13 @@ export declare interface SwirlIconVoice extends Components.SwirlIconVoice {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-voice',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconVoice {
   protected el: HTMLElement;
@@ -4382,13 +4382,13 @@ export declare interface SwirlIconWarning extends Components.SwirlIconWarning {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-warning',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconWarning {
   protected el: HTMLElement;
@@ -4403,13 +4403,13 @@ export declare interface SwirlIconWork extends Components.SwirlIconWork {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 @Component({
   selector: 'swirl-icon-work',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['size']
+  inputs: ['color', 'size']
 })
 export class SwirlIconWork {
   protected el: HTMLElement;