diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
index 3d88f08c8d..2376e52a64 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.html
@@ -33,6 +33,7 @@
       [callbacks]="data.callbacks"
       [widgetType] = "data.widgetType"
       [actionSources]="actionSources"
+      [defaultIconColor]="data.defaultIconColor"
       [additionalWidgetActionTypes]="data.additionalWidgetActionTypes"
       formControlName="actions">
     </tb-manage-widget-actions>
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.ts
index bc3de16c69..067eb74166 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions-dialog.component.ts
@@ -32,6 +32,7 @@ export interface ManageWidgetActionsDialogData {
   actionsData: WidgetActionsData;
   callbacks: WidgetActionCallbacks;
   widgetType: widgetType;
+  defaultIconColor?: string;
   additionalWidgetActionTypes?: WidgetActionType[];
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
index 5ff5d50b47..a9b9d207d0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
@@ -72,6 +72,8 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
 
   @Input() widgetType: widgetType;
 
+  @Input() defaultIconColor: string;
+
   @Input() callbacks: WidgetActionCallbacks;
 
   @Input() actionSources: {[actionSourceId: string]: WidgetActionSource};
@@ -233,6 +235,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
         actionsData,
         action: deepClone(action),
         widgetType: this.widgetType,
+        defaultIconColor: this.defaultIconColor,
         additionalWidgetActionTypes: this.additionalWidgetActionTypes
       }
     }).afterClosed().subscribe(
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index b77b5c860f..7a74624774 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -61,6 +61,7 @@ export interface WidgetActionDialogData {
   actionsData: WidgetActionsData;
   action?: WidgetActionDescriptorInfo;
   widgetType: widgetType;
+  defaultIconColor?: string;
   additionalWidgetActionTypes?: WidgetActionType[];
 }
 
@@ -78,6 +79,8 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   isAdd: boolean;
   action: WidgetActionDescriptorInfo;
 
+  defaultIconColor: string;
+
   customActionEditorCompleter = CustomActionEditorCompleter;
 
   submitted = false;
@@ -106,6 +109,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
               private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
     this.isAdd = data.isAdd;
+    this.defaultIconColor = data.defaultIconColor;
     if (this.isAdd) {
       this.action = {
         id: this.utils.guid(),
@@ -130,7 +134,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       buttonType: [{ value: this.action.buttonType ?? WidgetHeaderActionButtonType.icon, disabled: true}, []],
       showIcon: [{ value: this.action.showIcon ?? true, disabled: true}, []],
       icon: [this.action.icon, Validators.required],
-      buttonColor: [{ value: this.action.buttonColor ?? 'rgba(0, 0, 0, 0.87)', disabled: true}, []],
+      buttonColor: [{ value: this.action.buttonColor ?? this.defaultIconColor, disabled: true}, []],
       buttonFillColor: [{ value: this.action.buttonFillColor ?? '#3F52DD', disabled: true}, []],
       buttonBorderColor: [{ value: this.action.buttonBorderColor ?? '#3F52DD', disabled: true}, []],
       customButtonStyle: [{ value: this.action.customButtonStyle ?? {}, disabled: true}, []],
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts
index 353ca04cb4..afe4ffdde2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/widget-actions-panel.component.ts
@@ -123,6 +123,7 @@ export class WidgetActionsPanelComponent implements ControlValueAccessor, OnInit
         callbacks: this.widgetConfigComponent.widgetConfigCallbacks,
         actionsData,
         widgetType: this.widgetConfigComponent.widgetType,
+        defaultIconColor: this.widgetConfigComponent.widgetSettings.get('color').value,
         additionalWidgetActionTypes: this.widgetConfigComponent.modelValue.typeParameters.additionalWidgetActionTypes
       }
     }).afterClosed().subscribe(
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index ae4e35aa9c..2b187ab0b2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -163,6 +163,7 @@
         <tb-manage-widget-actions
           [callbacks]="widgetConfigCallbacks"
           [widgetType] = "modelValue.widgetType"
+          [defaultIconColor]="widgetSettings.get('color').value"
           [actionSources]="modelValue.actionSources"
           [additionalWidgetActionTypes]="modelValue.typeParameters.additionalWidgetActionTypes"
           formControlName="actions">
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index f8fa032c8c..a15da83a28 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -365,7 +365,7 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges,
 
   headerButtonStyle(buttonType: WidgetHeaderActionButtonType = WidgetHeaderActionButtonType.icon,
                     customButtonStyle:{[key: string]: string},
-                    buttonColor: string = 'rgba(0,0,0,0.87)',
+                    buttonColor: string = this.widget.config.color,
                     backgroundColor: string,
                     borderColor: string) {
     const buttonStyle = {};