main - d7fc560 fix(docs): add example for adding icon in meta section using matListI… (#30068)

Author: im100ra

docs-content/overviews/material/list/list.html

@@ -169,6 +169,27 @@ <h3 id="lists-with-icons" class="docs-header-link">
     <span class="hljs-tag">&lt;/<span class="hljs-name">mat-list-item</span>&gt;</span>
   }
 <span class="hljs-tag">&lt;/<span class="hljs-name">mat-list</span>&gt;</span>
+</code></pre>
+
+        <h3 id="lists-with-meta-section-icons" class="docs-header-link">
+          <span header-link="lists-with-meta-section-icons"></span>
+          Lists with meta section icons
+        </h3>
+      <p>To add a meta icon to your list item, use the <code>matListItemMeta</code> directive. This allows you to display an icon or any other content in the meta section of the list item.</p>
+<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-list</span>&gt;</span>
+  @for (message of messages; track message) {
+    <span class="hljs-tag">&lt;<span class="hljs-name">mat-list-item</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">matListItemMeta</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>folder<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">matListItemTitle</span>&gt;</span>{{message.from}}<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
+      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">matListItemLine</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{message.subject}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;demo-2&quot;</span>&gt;</span> -- {{message.content}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">mat-list-item</span>&gt;</span>
+  }
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-list</span>&gt;</span>
 </code></pre>
 
         <h3 id="lists-with-avatars" class="docs-header-link">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/components-examples",
-  "version": "19.1.0-next.0+sha-6962c85",
+  "version": "19.1.0-next.0+sha-d7fc560",
   "description": "Angular Components Examples",
   "private": true,
   "repository": {
@@ -259,15 +259,15 @@
   },
   "homepage": "https://github.com/angular/components#readme",
   "peerDependencies": {
-    "@angular/cdk": "19.1.0-next.0+sha-6962c85",
-    "@angular/cdk-experimental": "19.1.0-next.0+sha-6962c85",
+    "@angular/cdk": "19.1.0-next.0+sha-d7fc560",
+    "@angular/cdk-experimental": "19.1.0-next.0+sha-d7fc560",
     "@angular/core": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
     "@angular/common": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
-    "@angular/material": "19.1.0-next.0+sha-6962c85",
-    "@angular/material-experimental": "19.1.0-next.0+sha-6962c85",
-    "@angular/material-moment-adapter": "19.1.0-next.0+sha-6962c85",
-    "@angular/material-luxon-adapter": "19.1.0-next.0+sha-6962c85",
-    "@angular/material-date-fns-adapter": "19.1.0-next.0+sha-6962c85"
+    "@angular/material": "19.1.0-next.0+sha-d7fc560",
+    "@angular/material-experimental": "19.1.0-next.0+sha-d7fc560",
+    "@angular/material-moment-adapter": "19.1.0-next.0+sha-d7fc560",
+    "@angular/material-luxon-adapter": "19.1.0-next.0+sha-d7fc560",
+    "@angular/material-date-fns-adapter": "19.1.0-next.0+sha-d7fc560"
   },
   "dependencies": {
     "tslib": "^2.3.0"