Dropdownlist mat-icons do not render properly

[Dimitrije Prosevski]

<ejs-dropdownlist

[dataSource]="tasksList"

[fields]="tasksFields"

[itemTemplate]="itemTemplate"

>

<ng-template #itemTemplate let-task>

{{ task.name}}

<mat-icon *ngIf="task.required">alarmmat-icon>

ng-template>

ejs-dropdownlist>

The code shown above produces the following result, the alarm icon needs to show for Task 1000 - Residential Services because the task is required. It is not showing because its getting cut off, you can see it on the right of "Residential Services" if you look closely. I tried downgrading @syncfusion/ej2-angular-dropdowns but that did not fix it either. This issue started occurring when I updated my app to angular 14.

[Sureshkumar P]

Hi Dimitrije,

We have validated the reported issue, but we cannot replicate the issue on our end. we have attached the validated sample below.

Sample link: https://stackblitz.com/edit/angular-nnw281?file=app.component.html

If still, you have faced the same issue, then please replicate the reported issue in the above sample and revert us with a detailed issue replication procedure. These details will help us to provide an exact solution as earlier as possible.

Regards,

Sureshkumar P

[Dimitrije Prosevski]

I was changing the size of an icon and it looked like mat-icon had "overflow: hidden" by default, and that messed it up. Thanks for your response it helped with debugging it.

The fix was to set overflow: initial !important;

[Sureshkumar P]

Dimitrije,

Thanks for your update.

Regards,

Sureshkumar P