invalid padding for list-items with mat-list-icon

[nename0]

Bug:

A list with icons, like here (https://material.angular.io/components/list/examples), has invalid padding as per spec (https://material.io/guidelines/components/lists.html#lists-specs).

What is the expected behavior?

The "Left icon padding" should be 16px and the "Text padding, left" 72px.

What is the current behavior?

Left icon padding:
mat-list-item-content padding-left 16px +
mat-list-icon padding-left 4px
= mat-list-icon is 20px from side

Text padding left:
mat-list-item-content padding-left 16px +
mat-list-icon padding-left 4px +
mat-list-icon width 24px +
mat-list-icon padding-right 4px +
mat-list-text padding-left 16px
= content of mat-list-text is 64px from side

Note: #9500 does not seem to change this

What are the steps to reproduce?

Forked from examples:
5.1.0: https://stackblitz.com/edit/angular-tfndqa-gwcrab?file=index.html
latest build 5.1.0-3352201: https://stackblitz.com/edit/angular-tfndqa-xpmt2u?file=index.html

The avatars line up with the subheaders with a padding of 16px.
However the icons don't line up with the subheaders. Also the text right to the icons is not 72px padded and therefore does not line up with the text of the avatars.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "^5.1.0"
and
"@angular/material": "angular/material-builds#5.1.0-3352201"

[devversion]

Those are valid points. I want to mention, that #9500 didn't aim to specifically rework the list completely to properly align with the specs. There are way more things that would need to be updated to exactly match the specs

Right now the icon usually just has a width of 40px and will be styled with a padding of 16px on the end side (which does not result in the 72px from the specs)

72px + 16px	16px

As we can see in the screenshots above, there can be also two different behaviors for subheaders.

cc. @crisbeto @jelbourn

[nename0]

@devversion I have to correct you a bit.
matListAvatars (the specs seem to make a clear distinction between icons and avatars) currently have a width of 40px. Theres nothing wrong with that. Its just like in the specs (16px padding + 40px width + 16px padding = 72px).
The problem comes with mat-list-icon. They have a width of 24px as per spec, but neither the 16px nor the 72px padding is correct with them.

[devversion]

True, I thought accidentially that the 72px line does not include the 16px initial horizontal padding. Still, we would need to have a way to support the different subheader shiftings.

[thw0rted]

I came here to report this but found the issue already open, which is good. I just want to make sure you don't forget about dense lists: StackBlitz

Note that in the linked example, the keylines are drawn at 16px and 72px. On the dense list, the text content is further to the left than the non-dense list, and in the spec they're both supposed to stick to the 72px keyline.