List

mat-list for displaying rows of items with icons, titles, and descriptions.

Basic List

mat-list with mat-list-item, icons, titles and description lines.

Inbox3 new messages

Starred5 items

SentView sent mail

HTML

<mat-list>
  <mat-list-item>
    <mat-icon matListItemIcon>inbox</mat-icon>
    <span matListItemTitle>Inbox</span>
    <span matListItemLine>3 new messages</span>
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>star</mat-icon>
    <span matListItemTitle>Starred</span>
    <span matListItemLine>5 items</span>
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>send</mat-icon>
    <span matListItemTitle>Sent</span>
    <span matListItemLine>View sent mail</span>
  </mat-list-item>
</mat-list>

Multi-line List

mat-list-item with multiple description lines.

System UpdateVersion 3.2.1 is availableIncludes security patches and bug fixes

Meeting ReminderTeam standup at 10:00 AMConference Room B or Zoom

HTML

<mat-list>
  <mat-list-item>
    <mat-icon matListItemIcon>info</mat-icon>
    <span matListItemTitle>System Update</span>
    <span matListItemLine>Version 3.2.1 is available</span>
    <span matListItemLine>Includes security patches and bug fixes</span>
  </mat-list-item>
  <mat-list-item>
    <mat-icon matListItemIcon>schedule</mat-icon>
    <span matListItemTitle>Meeting Reminder</span>
    <span matListItemLine>Team standup at 10:00 AM</span>
    <span matListItemLine>Conference Room B or Zoom</span>
  </mat-list-item>
</mat-list>