md-list-icon aligment on lists
See original GitHub issueBug, 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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
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
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):
(edited to be more clear)