Skip to content

Commit d7fc560

Browse files
authoredNov 27, 2024··
fix(docs): add example for adding icon in meta section using matListI… (#30068)
* fix(material/list): add example of matListItemMeta for meta section icon resolves #26415 * fix(material/list): fix indentation
1 parent 49a37b1 commit d7fc560

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed
 

‎src/material/list/list.md

+22
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,28 @@ To add an icon to your list item, use the `matListItemIcon` attribute.
158158
</mat-list>
159159
```
160160

161+
### Lists with meta section icons
162+
163+
To add a meta icon to your list item, use the `matListItemMeta` directive. This allows you to display an icon or any other content in the meta section of the list item.
164+
165+
166+
```html
167+
<mat-list>
168+
@for (message of messages; track message) {
169+
<mat-list-item>
170+
<div matListItemMeta>
171+
<mat-icon>folder</mat-icon>
172+
</div>
173+
<h3 matListItemTitle>{{message.from}}</h3>
174+
<p matListItemLine>
175+
<span>{{message.subject}}</span>
176+
<span class="demo-2"> -- {{message.content}}</span>
177+
</p>
178+
</mat-list-item>
179+
}
180+
</mat-list>
181+
```
182+
161183
### Lists with avatars
162184

163185
To include an avatar image, add an image tag with an `matListItemAvatar` attribute.

0 commit comments

Comments
 (0)
Please sign in to comment.