From d7fc5601405f83e5418121382b7647d4dcc7793c Mon Sep 17 00:00:00 2001
From: Sadra Karami <87000790+im100ra@users.noreply.github.com>
Date: Wed, 27 Nov 2024 15:53:18 +0330
Subject: [PATCH] =?UTF-8?q?fix(docs):=20add=20example=20for=20adding=20ico?=
 =?UTF-8?q?n=20in=20meta=20section=20using=20matListI=E2=80=A6=20(#30068)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(material/list): add example of matListItemMeta for meta section icon
resolves #26415

* fix(material/list): fix indentation
---
 src/material/list/list.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/material/list/list.md b/src/material/list/list.md
index c1c86b453b30..e6a7ed85d9d6 100644
--- a/src/material/list/list.md
+++ b/src/material/list/list.md
@@ -158,6 +158,28 @@ To add an icon to your list item, use the `matListItemIcon` attribute.
 </mat-list>
 ```
 
+### Lists with meta section icons
+
+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.
+
+
+```html
+<mat-list>
+  @for (message of messages; track message) {
+    <mat-list-item>
+      <div matListItemMeta>
+        <mat-icon>folder</mat-icon>
+      </div>
+      <h3 matListItemTitle>{{message.from}}</h3>
+      <p matListItemLine>
+        <span>{{message.subject}}</span>
+        <span class="demo-2"> -- {{message.content}}</span>
+      </p>
+    </mat-list-item>
+  }
+</mat-list>
+```
+
 ### Lists with avatars
 
 To include an avatar image, add an image tag with an `matListItemAvatar` attribute.