Fixed #14286 - Add missing icon template

src/app/components/togglebutton/togglebutton.interface.ts

@@ -1,4 +1,6 @@
+import { TemplateRef } from '@angular/core';
 import { ToggleButton } from './togglebutton';
+
 /**
  * Custom change event.
  * @see {@link ToggleButton.onChange}
@@ -14,3 +16,20 @@ export interface ToggleButtonChangeEvent {
      */
     checked: boolean | undefined;
 }
+
+/**
+ * Defines valid templates in ToggleButton.
+ * @group Templates
+ */
+export interface ToggleButtonTemplates {
+    /**
+     * Custom icon template.
+     * @param {boolean} context - checked state as boolean.
+     */
+    icon(context: {
+        /**
+         * Checked.
+         */
+        $implicit: boolean;
+    }): TemplateRef<{ $implicit: boolean }>;
+}

src/app/components/togglebutton/togglebutton.ts

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { RippleModule } from 'primeng/ripple';
 import { ToggleButtonChangeEvent } from './togglebutton.interface';
+import { Nullable } from 'primeng/ts-helpers';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 
 type ToggleButtonIconPosition = 'left' | 'right';
 
@@ -33,12 +35,16 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = {
             [attr.data-pc-name]="'togglebutton'"
             [attr.data-pc-section]="'root'"
         >
+            @if(!iconTemplate) {
             <span
                 *ngIf="onIcon || offIcon"
                 [class]="checked ? this.onIcon : this.offIcon"
                 [ngClass]="{ 'p-button-icon': true, 'p-button-icon-left': iconPos === 'left', 'p-button-icon-right': iconPos === 'right' }"
                 [attr.data-pc-section]="'icon'"
             ></span>
+            } @else {
+            <ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: checked }"></ng-container>
+            }
             <span class="p-button-label" *ngIf="onLabel || offLabel" [attr.data-pc-section]="'label'">{{ checked ? (hasOnLabel ? onLabel : '') : hasOffLabel ? offLabel : '' }}</span>
         </div>
     `,
@@ -117,6 +123,10 @@ export class ToggleButton implements ControlValueAccessor {
      */
     @Output() onChange: EventEmitter<ToggleButtonChangeEvent> = new EventEmitter<ToggleButtonChangeEvent>();
 
+    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;
+
+    iconTemplate: Nullable<TemplateRef<any>>;
+
     checked: boolean = false;
 
     onModelChange: Function = () => {};
@@ -125,6 +135,19 @@ export class ToggleButton implements ControlValueAccessor {
 
     constructor(public cd: ChangeDetectorRef) {}
 
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'icon':
+                    this.iconTemplate = item.template;
+                    break;
+                default:
+                    this.iconTemplate = item.template;
+                    break;
+            }
+        });
+    }
+
     toggle(event: Event) {
         if (!this.disabled) {
             this.checked = !this.checked;
@@ -184,8 +207,8 @@ export class ToggleButton implements ControlValueAccessor {
 }
 
 @NgModule({
-    imports: [CommonModule, RippleModule],
-    exports: [ToggleButton],
+    imports: [CommonModule, RippleModule, SharedModule],
+    exports: [ToggleButton, SharedModule],
     declarations: [ToggleButton]
 })
 export class ToggleButtonModule {}