question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-list-icon aligment on lists

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
BaimosTechnologiescommented, Jul 21, 2017

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

2reactions
peluprvicommented, Jun 21, 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)

Read more comments on GitHub >

github_iconTop Results From Across the Web

md-list-icon or md-button aligned to right? (Angular Material 2)
Any way how to make buttons/icons/checkboxes aligned to the right like in Material 1: Angular ...
Read more >
md-list-icon or md-button aligned to right? (Angular Material 2)
Any way how to make buttons/icons/checkboxes aligned to the right like in Material 1: Angular Material 1 list with actions
Read more >
angular/material2 - Gitter
How do you guys make routerLinkActive persistent on md-sidenav md-list-item? <md-sidenav #sidenav align="end"> <md-nav-list> <a md-list-item ...
Read more >
Text In Material Icons In Mat-Toolbar Alignment - ADocLib
How To Vertically Align Text With Icon Font Stack Overflow Material Icons ... Md List Icon Or Md Button Aligned To Right Angular...
Read more >
demo/node_modules/@angular/material/@angular ... - GitLab
grid-list/grid-tile';\nexport {MdMenuItemBase as ɵj ... n */\nMdSortHeader.prototype.id;\n/**\n * Sets the position of the arrow that ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found