From f2e66ca01280bcf5998a10b8e46adc57ea21a6cc Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Fri, 8 Aug 2025 17:06:02 +0300
Subject: [PATCH] Feature custom image icon fixes after review.

---
 ui-ngx/src/app/shared/components/icon.component.ts    |  1 +
 .../components/material-icon-select.component.html    |  6 +-----
 .../components/material-icon-select.component.ts      | 11 -----------
 3 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/icon.component.ts b/ui-ngx/src/app/shared/components/icon.component.ts
index 36c4e2e0e8..dfc7944716 100644
--- a/ui-ngx/src/app/shared/components/icon.component.ts
+++ b/ui-ngx/src/app/shared/components/icon.component.ts
@@ -303,6 +303,7 @@ export class TbIconComponent extends _TbIconBase
       this.imagePipe.transform(rawName, { asString: true, ignoreLoadingImage: true }).subscribe(
         imageUrl => {
           const imgElement = this.renderer.createElement('img');
+          this.renderer.addClass(imgElement, 'mat-icon');
           this.renderer.setAttribute(imgElement, 'src', imageUrl as string);
           const elem: HTMLElement = this._elementRef.nativeElement;
           this.renderer.insertBefore(elem, imgElement, this._iconNameContent.nativeElement);
diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.html b/ui-ngx/src/app/shared/components/material-icon-select.component.html
index 13bf46d1e0..25aa51d30d 100644
--- a/ui-ngx/src/app/shared/components/material-icon-select.component.html
+++ b/ui-ngx/src/app/shared/components/material-icon-select.component.html
@@ -37,10 +37,6 @@
           [disabled]="disabled"
           #matButton
           (click)="openIconPopup($event, matButton)">
-    @if (!isCustomIcon) {
-      <tb-icon matButtonIcon>{{materialIconFormGroup.get('icon').value}}</tb-icon>
-    } @else {
-      <img class="mat-icon" alt="icon" [src]="materialIconFormGroup.get('icon').value | image | async">
-    }
+    <tb-icon matButtonIcon>{{materialIconFormGroup.get('icon').value}}</tb-icon>
   </button>
 </ng-template>
diff --git a/ui-ngx/src/app/shared/components/material-icon-select.component.ts b/ui-ngx/src/app/shared/components/material-icon-select.component.ts
index c2e904d8d0..2bbc5b7528 100644
--- a/ui-ngx/src/app/shared/components/material-icon-select.component.ts
+++ b/ui-ngx/src/app/shared/components/material-icon-select.component.ts
@@ -36,7 +36,6 @@ import { TbPopoverService } from '@shared/components/popover.service';
 import { MaterialIconsComponent } from '@shared/components/material-icons.component';
 import { MatButton } from '@angular/material/button';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { isTbImage } from '@shared/models/resource.models';
 
 @Component({
   selector: 'tb-material-icon-select',
@@ -76,8 +75,6 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
   @coerceBoolean()
   allowedCustomIcon = false;
 
-  isCustomIcon = false;
-
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
@@ -138,13 +135,11 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
     this.materialIconFormGroup.patchValue(
       { icon: this.modelValue }, {emitEvent: false}
     );
-    this.defineIconType(value);
   }
 
   private updateModel() {
     const icon: string = this.materialIconFormGroup.get('icon').value;
     if (this.modelValue !== icon) {
-      this.defineIconType(icon);
       this.modelValue = icon;
       this.propagateChange(this.modelValue);
     }
@@ -198,10 +193,4 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
     this.materialIconFormGroup.get('icon').patchValue(null, {emitEvent: true});
     this.cd.markForCheck();
   }
-
-  private defineIconType(icon: string) {
-    if (this.allowedCustomIcon) {
-      this.isCustomIcon = isTbImage(icon);
-    }
-  }
 }