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.

Misalignment of md-list-avatar icons inside an md-list-item

See original GitHub issue

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

An md-list-avatar in a single lined md-list-item should align horizontally with the md-list-item text.

What is the current behavior?

The md-list-avatar does not align, the icon appears 8px more to the top then the text of the list item.

What are the steps to reproduce?

Create an md-list with list items containing an md-list-avatar and md-line, the issue occurs also on md-nav-list as well as non dense lists.

<md-list dense>
    <md-list-item> 
        <md-icon md-list-avatar>arrow_forward</md-icon>
        <h4 md-line>Pepper</h4>
    </md-list-item>
    <md-list-item> 
        <md-icon md-list-avatar>arrow_forward</md-icon>
        <h4 md-line>Salt</h4>
    </md-list-item>
    <md-list-item> 
        <md-icon md-list-avatar>arrow_forward</md-icon>
        <h4 md-line>Paprika</h4>
    </md-list-item>
</md-list>

Providing a Plunker (or similar) is the best way to get the team to see your issue. http://plnkr.co/edit/HsygqK66et7JhsNEDgq4?p=preview

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

The layout doesn’t look right without this change.

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

Test on angular 2.4.2, material 2.0.0-beta.1, MacOs El Captain, Google Chrome 55.0.2883.95 (64-bit)

Is there anything else we should know?

The md-icon doesn’t have a specific height for the usage in an md-list. Adding height:24px to the md-icon will fix it.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
ocarreteromcommented, Jan 17, 2017

To display an icon in list item use md-list-icon directive instead of md-list-avatar.

1reaction
tobi-or-not-tobicommented, Jan 14, 2017

Thanks @codef0rmer that’s indeed what I did to fix it. I didn’t know it was not recommended, I actually think its a very common to use an md-icon in a list like you and I do. I’ll rewrite the issue to change it from but to proposal.

Read more comments on GitHub >

github_iconTop Results From Across the Web

how to align md-list-avatar with md-list-icon - Stack Overflow
Current solution is to just download the icon as an SVG and use at as an avatar - although they are a little...
Read more >
Use md-list-icon in example code · Issue #3217 - GitHub
According to the documentation one has to use md-list-icon for md-icon .... Lists with icons. To add an icon to your list item,...
Read more >
Directives > mdListItem - Angular Material
mdListItem API Documentation ... .md-avatar-icon - class for icon avatars ... styling when the inner contents are wrapped inside of a <md-button> tag....
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