Feature custom icon in Custom icon init implementation.

ui-ngx/src/app/modules/home/menu/menu-link.component.ts

@@ -14,8 +14,9 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { MenuSection } from '@core/services/menu.models';
+import { tbImageIcon } from '@shared/models/custom-menu.models';
 
 @Component({
   selector: 'tb-menu-link',
@@ -23,14 +24,27 @@ import { MenuSection } from '@core/services/menu.models';
   styleUrls: ['./menu-link.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MenuLinkComponent implements OnInit {
+export class MenuLinkComponent implements OnInit, OnChanges {
 
   @Input() section: MenuSection;
 
+  isCustomIcon: boolean;
+
   constructor() {
   }
 
   ngOnInit() {
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const propName of Object.keys(changes)) {
+      const change = changes[propName];
+      if (change.currentValue !== change.previousValue) {
+        if (propName === 'section' && change.currentValue) {
+          this.isCustomIcon = tbImageIcon(change.currentValue.icon);
+        }
+      }
+    }
+  }
+
 }

ui-ngx/src/app/shared/components/material-icon-select.component.html

@@ -37,6 +37,10 @@
           [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">
+    }
   </button>
 </ng-template>

ui-ngx/src/app/shared/components/material-icon-select.component.ts

@@ -36,6 +36,7 @@ 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 { tbImageIcon } from '@shared/models/custom-menu.models';
 
 @Component({
   selector: 'tb-material-icon-select',
@@ -71,6 +72,12 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
   @coerceBoolean()
   iconClearButton = false;
 
+  @Input()
+  @coerceBoolean()
+  allowedCustomIcon = false;
+
+  isCustomIcon = false;
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
@@ -131,11 +138,13 @@ 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);
     }
@@ -169,7 +178,8 @@ export class MaterialIconSelectComponent extends PageComponent implements OnInit
         this.viewContainerRef, MaterialIconsComponent, 'left', true, null,
         {
           selectedIcon: this.materialIconFormGroup.get('icon').value,
-          iconClearButton: this.iconClearButton
+          iconClearButton: this.iconClearButton,
+          allowedCustomIcon: this.allowedCustomIcon,
         },
         {},
         {}, {}, true);
@@ -188,4 +198,10 @@ 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 = tbImageIcon(icon);
+    }
+  }
 }

ui-ngx/src/app/shared/components/material-icons.component.html

@@ -17,6 +17,15 @@
 -->
 <div class="tb-material-icons-panel">
   <div *ngIf="showTitle" class="tb-material-icons-title" translate>icon.icons</div>
+  @if (allowedCustomIcon) {
+    <div class="flex w-full flex-row items-center justify-end">
+      <tb-toggle-select [(ngModel)]="isCustomIcon" [ngModelOptions]="{standalone: true}" (ngModelChange)="selectedIcon = null">
+        <tb-toggle-option [value]="false">{{ 'resource.system' | translate }}</tb-toggle-option>
+        <tb-toggle-option [value]="true">{{ 'icon.custom' | translate }}</tb-toggle-option>
+      </tb-toggle-select>
+    </div>
+  }
+  @if (!isCustomIcon) {
     <mat-form-field class="tb-material-icons-search tb-inline-field" appearance="outline" subscriptSizing="dynamic">
       <mat-icon matPrefix>search</mat-icon>
       <input matInput [formControl]="searchIconControl" placeholder="{{ 'icon.search-icon' | translate }}"/>
@@ -37,7 +46,7 @@
                   class="tb-select-icon-button"
                   mat-raised-button
                   color="primary"
-                (click)="selectIcon(icon)"
+                  (click)="selectIcon(icon.name)"
                   matTooltip="{{ icon.displayName }}"
                   matTooltipPosition="above"
                   type="button">
@@ -46,7 +55,7 @@
           <button *ngIf="icon.name !== selectedIcon"
                   class="tb-select-icon-button"
                   mat-button
-                (click)="selectIcon(icon)"
+                  (click)="selectIcon(icon.name)"
                   matTooltip="{{ icon.displayName }}"
                   matTooltipPosition="above"
                   type="button">
@@ -75,4 +84,17 @@
         {{ 'action.show-more' | translate }}
       </button>
     </div>
+  } @else {
+    <tb-gallery-image-input class="min-w-[520px]"
+                            [(ngModel)]="selectedIcon">
+    </tb-gallery-image-input>
+    <div class="tb-material-icons-panel-buttons">
+      <span class="flex-1"></span>
+      <button class="tb-material-icons-show-more" mat-button color="primary"
+              [disabled]="!selectedIcon"
+              (click)="selectIcon(selectedIcon)">
+        {{ 'action.set' | translate }}
+      </button>
+    </div>
+  }
 </div>

ui-ngx/src/app/shared/components/material-icons.component.ts

@@ -37,6 +37,7 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { tbImageIcon } from '@shared/models/custom-menu.models';
 
 @Component({
   selector: 'tb-material-icons',
@@ -61,6 +62,10 @@ export class MaterialIconsComponent extends PageComponent implements OnInit {
   @coerceBoolean()
   showTitle = true;
 
+  @Input()
+  @coerceBoolean()
+  allowedCustomIcon = false;
+
   @Input()
   popover: TbPopoverComponent;
 
@@ -71,6 +76,8 @@ export class MaterialIconsComponent extends PageComponent implements OnInit {
   showAllSubject = new BehaviorSubject<boolean>(false);
   searchIconControl: UntypedFormControl;
 
+  isCustomIcon = false;
+
   iconsRowHeight = 48;
 
   iconsPanelHeight: string;
@@ -122,14 +129,15 @@ export class MaterialIconsComponent extends PageComponent implements OnInit {
       map((data) => data.iconRows),
       share()
     );
+    this.isCustomIcon = tbImageIcon(this.selectedIcon)
   }
 
   clearSearch() {
     this.searchIconControl.patchValue('', {emitEvent: true});
   }
 
-  selectIcon(icon: MaterialIcon) {
-    this.iconSelected.emit(icon.name);
+  selectIcon(icon: string) {
+    this.iconSelected.emit(icon);
   }
 
   clearIcon() {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -9507,6 +9507,7 @@
     "icon": {
         "icon": "Icon",
         "icons": "Icons",
+        "custom": "Custom",
         "select-icon": "Select icon",
         "material-icons": "Material icons",
         "show-all": "Show all icons",