md-list-icon aligment on lists

[peluprvi]

Bug, feature request, or proposal:

Proposal:

• Remove the padding: 4px of .mat-list-icon.
  Requests:
• A list icon parent class with a fixed width.
• A separated icon background class for the list icon.

What is the expected behavior?

There are two specs for icon alignment: (1) using the raw icon and (2) using the icon inside a circle. In both, the space form the text to the left side of the list is the same (72dp). The only change is the icon width.
There is no padding on icon (1) ou (2) and the background is optional.
The first left pixel of the icon or the icon background is 16dp from the left of the list content.

Material specs:
https://material.io/guidelines/layout/structure.html#structure-side-nav
https://material.io/guidelines/components/lists.html#lists-specs

Example 1: layout_structure_sidenav_structure1
Example 2: components_lists_keylines_single5
Example 3: components_lists_keylines_two10

What is the current behavior?

md-list-icon uses its own width as the space plus the icon and text paddings to create a 72dp width. This approach gives more than 16dp (currently it is 20dp) from icon to the left of the list content and the icon doesn't align with other vertical elements (like the user email on the specs above).

What are the steps to reproduce?

<!-- How to align the texts? -->
<md-list>
  <md-list-item *ngFor="let message of messages">
    <md-icon md-list-icon>folder</md-icon>
    <h3 md-line> {{message.from}} </h3>
  </md-list-item>
</md-list>
<md-list>
  <md-list-item *ngFor="let message of messages">
    <h3 md-line> {{message.from}} </h3>
  </md-list-item>
</md-list>

<!-- Solution example -->
<md-list>
  <md-list-item *ngFor="let message of messages">
    <!-- Fixed spacer -->
    <md-list-icon-spacer>
      <!-- Icon can have a md-list-icon-bg for rounded background -->
      <md-icon md-list-icon md-list-icon-bg>folder</md-icon>
    </md-list-icon-spacer>
    <h3 md-line> {{message.from}} </h3>
  </md-list-item>
</md-list>
<md-list>
  <md-list-item *ngFor="let message of messages">
    <!-- Fixed spacer -->
    <md-list-icon-spacer></md-list-icon-spacer>
    <h3 md-line> {{message.from}} </h3>
  </md-list-item>
</md-list>

What is the use-case or motivation for changing an existing behavior?

Create a sidenav with a user profile like the fist image above. Or align a list with icons with a list without icons.

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

b1a9cb5

Is there anything else we should know?

This needs to be considered for the right icon too. And on dense options.

[jelbourn]

Is md-list-avatar what you're looking for?

[peluprvi]

I'm looking for this alignment, Everything left aligned.

The icon doesn't have an extra padding. On the specs, the left squared one has 24px width, not 32px.
[Other example] from Material Design specs.

In a list that have some items with icon and some items without icons, the text can be left aligned with the icons (16px), like this example

So, that is the summary (for non dense option):

Description	Current	Expected
Left distance to the text without icon	16px	16px
Left distance to the icon	20px	16px
Icon width without background (squared)	24px	32px
Icon width with rounded background (like avatar)	32px	40px
Left distance to the text of a list item when it doesn't have icon	16px	16px
Left distance to the text of a list item when it has icon	64px	72px
Text of a list item can be 72px from the left even without icon	No	Yes

(edited to be more clear)

[BaimosTechnologies]

I agree the styling doesn't conform with the material design guidelines, the Expected values are correct.

In AngularJS Material you can find how it should look like:
https://material.angularjs.org/latest/demo/list

[philip-firstorder]

What is the status on this? Will it be corrected?

As a temporary fix I added in my global styles.scss file these lines, which work even for avatars

// temporary fix for https://github.com/angular/material2/issues/5090
// periodically check this issue to remove these css lines
.mat-list .mat-list-item .mat-list-icon, 
.mat-list .mat-list-option .mat-list-icon, 
.mat-nav-list .mat-list-item .mat-list-icon, 
.mat-nav-list .mat-list-option .mat-list-icon, 
.mat-selection-list .mat-list-item .mat-list-icon, 
.mat-selection-list .mat-list-option .mat-list-icon {
  padding: 0 16px 0 0 !important;
}
.mat-list .mat-list-item .mat-list-text, 
.mat-list .mat-list-option .mat-list-text, 
.mat-nav-list .mat-list-item .mat-list-text, 
.mat-nav-list .mat-list-option .mat-list-text, 
.mat-selection-list .mat-list-item .mat-list-text, 
.mat-selection-list .mat-list-option .mat-list-text {
  padding-right: 0 !important;
}