From 85356c291c16cc28ebe3e62bf84dfe0f6e357a03 Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Wed, 22 Apr 2026 13:22:07 +0200
Subject: [PATCH] Fixed icon placement in Value stepper icon

---
 .../widget/lib/rpc/power-button-widget.models.ts     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
index 4836cc3804..6b8fcad4fe 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.models.ts
@@ -28,7 +28,7 @@ import { Circle, Effect, Element, G, Gradient, Path, Runner, Svg, Text, Timeline
 import '@svgdotjs/svg.filter.js';
 import tinycolor from 'tinycolor2';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { Observable, of, shareReplay } from 'rxjs';
+import { from, Observable, of, shareReplay } from 'rxjs';
 import { isSvgIcon, splitIconName } from '@shared/models/icon.models';
 import { catchError, map, take } from 'rxjs/operators';
 import { MatIconRegistry } from '@angular/material/icon';
@@ -392,7 +392,15 @@ export abstract class PowerButtonShape {
       tspan.attr({
         'dominant-baseline': 'hanging'
       });
-      return of(textElement);
+      return from(document.fonts.ready).pipe(
+        map(() => {
+          const iconGroup = this.svgShape.group();
+          textElement.addTo(iconGroup);
+          const box = iconGroup.bbox();
+          iconGroup.translate(-box.cx, -box.cy);
+          return iconGroup;
+        })
+      );
     }
   }