Bug, feature request, or proposal:

https://material.angular.io/components/component/list

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, use the md-list-icon attribute.

<md-list>
  <md-list-item *ngFor="let message of messages">
    <md-icon md-list-icon>folder</md-icon>
    <h3 md-line> {{message.from}} </h3>
    <p md-line>
      <span> {{message.subject}} </span>
      <span class="demo-2"> -- {{message.content}} </span>
    </p>
  </md-list-item>
</md-list>

But in the example code md-list-avatar is used....

<md-list>
  <h3 md-subheader>Folders</h3>
  <md-list-item *ngFor="let folder of folders">
    <md-icon md-list-avatar>folder</md-icon>
    <h4 md-line>{{folder.name}}</h4>
    <p md-line> {{folder.updated | date}} </p>
  </md-list-item>

...

This leads to misaligned icons

What is the expected behavior?

use md-list-icon in example (with md-icon)

What is the current behavior?

What are the steps to reproduce?

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

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

Is there anything else we should know?