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

[tobi-or-not-tobi]

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.

[codef0rmer]

@tobi-or-not-tobi I'm not sure if it's a bug because md-icon is not recommended. However, setting a custom class on <md-icon md-list-avatar class="menu-icon">arrow_forward</md-icon> to override the default height i.e 40px to 24px manually is the real strategy.

I've been doing it too.

[tobi-or-not-tobi]

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.

[ocarreterom]

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

[tobi-or-not-tobi]

Thanks @ocarreterom I wasn't aware of that feature.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}