How to add mat-icon in ng-multiselect-dropdown options

Question

Is there any way we can add mat-icon to the dropdown items, like shown in image(warning icon) icon should be condition based (means if condition satisfied then only show the icon)

this is my code:

        <ng-multiselect-dropdown class="dropdown" [placeholder]="'Select food'"
            [settings]="dropdownSettings" [data]="foodOptions" [(ngModel)]="selectedFood"
            onDropDownClose="onDropdownClose()" click="this.isDropdownOpen = true">
        </ng-multiselect-dropdown>

Or is there any other library which i can use, which supports this feature?

Answer 1

I found this ng-template which we can use to customize drop down options:

https://codesandbox.io/p/sandbox/custom-template-rgvjx?file=%2Fsrc%2Fapp%2Fapp.component.ts

<ng-multiselect-dropdown class="dropdown" [placeholder]="'Select food'" [settings]="dropdownSettings"
            [data]="foodOptions" [(ngModel)]="selectedFood" onDropDownClose="onDropdownClose()"
            click="this.isDropdownOpen = true">
            <ng-template #optionsTemplate let-item let-option="option" let-id="id">
                <div style="display: flex;justify-content: space-between;">
                    <label style="color: #333; min-width: 130px; font-weight: normal;">{{option}}</label>
                    <mat-icon class="warning-icon" *ngIf="isFood(option)"
                        [matTooltip]="getTooltipText(option)" [matTooltipPosition]="'right'"
                        matTooltipClass="description-tooltip">warning</mat-icon>
                </div>
            </ng-template>
</ng-multiselect-dropdown>