Igniteui-angular: Drop-Down: Icons and Text are misaligned in items

[simeonoff]

Description

After this PR was merged, the drop-down items in various UI components now have misaligned icons and text.

• igniteui-angular version: 10.0.x and up
• browser: all

Steps to reproduce

1. Open the Grid Filtering Samples
2. Click on the filter icon in the header of the ID column
3. Go to the _Text filter_ and click
4. Observe

Result

The icon and text in the drop-down items are vertically misaligned.

Expected result

The icon and text should be vertically aligned to the vertical center of the item.

Attachments

[desig9stein]

When we did the change for the dropdown ellipsis, we mention, that this issue we'll appear. The fix requires me to fix the template for that particular dropdown in the filtering. However, as @simeonoff says, we may have various UI components that may be broken. Basically everywhere where we have templated dropdown items we will encounter that issue.

The problem is that when we template an item the template goes inside the inner container "igx-drop-down__inner" and not replacing it. I believe that we need to fix that issue instead of going and fixing all the templates where we have templated dropdown items.

@Lipata @simeonoff What do you think about the idea to replace the inner container when the user templates the dropdown item?

[simeonoff]

@desig9stein Can you please create a PR with the suggested change? It would be better instead of trying to imagine the implementation myself, or how it will affect related components?

[kdinev]

Please update the changelog with the drop down item layout braking change, and also update the upgrade guide article with a section from 9.x to 10.0.x noting that the drop down item layout now needs to be handled by the application.

[simeonoff]

This seems to have regressed, again.