Nav Drawer items content uses same margin even without icon before it

[damyanpetev]

Description

Nav Drawer items content seems to use fixed margin to separate it from the icon that is still present even if there's no icon slot.

Steps to reproduce

1. Define a drawer with text only
   You can simply drop the icons from the dev demos like:

<igc-nav-drawer-item>
  <span slot="content">${items.text}</span>
</igc-nav-drawer-item>

2. Run the app and open the drawer

Result

The item content is still using a decent size margin:

At the very least it's not consistent with what I see in Ignite UI for Angular and from what I can tell in the Material design spec as well under Anatomy > Destinations

Expected result

It'd expect the separation margin to be attached to icon itself or if the icon slot is filled so that it can be dropped when there isn't one and produce results similar to Ignite in Angular:

Unless this is done on purpose of course, because without the bolding in Bootstrap it'd be a bit hard to distinguish between headers and items I guess.

Attachments

Attach a sample if available, and screenshots, if applicable.

[simeonoff]

@SisIvanova can we introduce the gap property to the navdrawer, like we did in angular, here as well?

[damyanpetev]

igniteui-webcomponents/src/components/nav-drawer/styles/nav-drawer-item.base.scss

Lines 28 to 31 in 2772658

	::slotted(igc-icon) {
	display: flex;
	font: inherit;
	margin-inline-end: rem(32px);

This was fixed by moving the margin to a slotted icon like ::slotted(igc-icon) under the base part - two issues with that:

• It's under the base part, so it could in theory style slotted icons in the content part
• The icon slot is not restricted, so it could contain an avatar, font-based icon or some other external icon component, not just igc-icon, right?

Can we target the margin under the part=icon specifically and perhaps put the margin on the last child like ::slotted(*:last-child)? Or if you already have a mechanism for detecting filled slots (I remember seeing some of those around), it could be on the part itself too.
Edit: Apparently a gap will do too

PS: Unless it's built into the component itself, I'd avoid targeting specific Ignite UI components is slots that if we can help it, though the item already had some of that for the icon. @simeonoff I see display: flex applied... is that related to the alignment we were looking at before?