Merge pull request #7180 from microting/copilot/implement-menu-icon-preview

Add icon preview to menu editor dialog

Author: renemadsen

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html

@@ -24,6 +24,10 @@ <h3 mat-dialog-title>{{'Edit menu entry' | translate}}</h3>
         placeholder="e.g., home, settings, dashboard"
       >
     </mat-form-field>
+    <div class="d-flex flex-row align-items-center mb-3" *ngIf="item.icon">
+      <span class="me-2">{{ 'Icon preview' | translate }}:</span>
+      <mat-icon id="editIconPreview">{{ item.icon }}</mat-icon>
+    </div>
     <div class="d-flex flex-row align-items-center need-wrapper"
          *ngIf="item.type === menuItemType.CustomLink || item.type === menuItemType.Link">
       <mat-form-field>

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.spec.ts

@@ -34,4 +34,25 @@ describe('NavigationMenuItemEditComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display icon preview when icon is set', () => {
+    component.item.icon = 'home';
+    fixture.detectChanges();
+    
+    const compiled = fixture.nativeElement;
+    const iconPreview = compiled.querySelector('#editIconPreview');
+    
+    expect(iconPreview).toBeTruthy();
+    expect(iconPreview.textContent.trim()).toBe('home');
+  });
+
+  it('should not display icon preview when icon is not set', () => {
+    component.item.icon = '';
+    fixture.detectChanges();
+    
+    const compiled = fixture.nativeElement;
+    const iconPreview = compiled.querySelector('#editIconPreview');
+    
+    expect(iconPreview).toBeFalsy();
+  });
 });