Components: md-list-icon aligment on lists

Created on 12 Jun 2017 · 6Comments · Source: angular/components

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?

https://github.com/angular/material2/commit/b1a9cb549f46a8da988c0742e3f03b1dc07a7a85

Is there anything else we should know?

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

P4 materiaicon materialist

Source

peluprvi

👍1

Most helpful comment

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

BaimosTechnologies on 21 Jul 2017

👍2

All 6 comments

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

jelbourn on 15 Jun 2017

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)

peluprvi on 16 Jun 2017

👍2

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

BaimosTechnologies on 21 Jul 2017

👍2

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;
}