Right margin for ion-avatar in ion-item not in line with material design guidelines

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Right margin for ion-avatar with slot=“start” in ion-item has right margin = 32px Expected behavior:

Right margin should be 16px according to material design https://material.io/design/components/lists.html#specs

Steps to reproduce:

Example in ionic4 documentation shows the issue: https://beta.ionicframework.com/docs/components#list (Look at PREVIEW not ios example) Related code: (From ionic4 docs)

<ion-list>
  <ion-item>
    <ion-avatar slot="start">
      <img src="/docs/assets/img/avatar-finn.png"></img>
    </ion-avatar>
    <ion-label>
      <h2>Finn</h2>
      <h3>I'm a big deal</h3>
      <p>Listen, I've had a pretty messed up day...</p>
    </ion-label>
  </ion-item>
</ion-list>

[brandyscarney]

Thanks for the issue! It seems the correct margin is applied to avatar, but it’s being overridden by this rule:

::slotted(:not(.interactive)[slot="start"]) {
  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
}

https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.md.scss#L89

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.