diff --git a/docs/src/app/pages/component-viewer/component-overview.html b/docs/src/app/pages/component-viewer/component-overview.html
index 715e4e126a72..a3397b3ed5e3 100644
--- a/docs/src/app/pages/component-viewer/component-overview.html
+++ b/docs/src/app/pages/component-viewer/component-overview.html
@@ -2,7 +2,9 @@
   <h2 class="cdk-visually-hidden" tabindex="-1">
     Overview for {{docItem.id}}
   </h2>
-  <doc-viewer [name]="docItem.id"
+  <doc-viewer
+    [name]="docItem.id"
+    [packageName]="docItem.packageName"
     [document]="getOverviewDocumentUrl(docItem)"
     class="docs-component-view-text-content docs-component-overview"
     (contentRendered)="updateTableOfContents('Overview Content', $event)" />
diff --git a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css
index 024ce71a26d8..5bc996314758 100644
--- a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css
+++ b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css
@@ -11,33 +11,36 @@
   line-height: 1.6;
 }
 
-.docs-angular-aria-banner-icon {
-  font-size: 20px;
+mat-icon {
   flex-shrink: 0;
-  fill: var(--mat-sys-primary);
+  color: var(--mat-sys-primary);
 }
 
 .docs-angular-aria-banner-content {
   flex: 1;
 }
 
-.docs-angular-aria-banner-content strong {
+strong {
   color: var(--mat-sys-primary);
 }
 
-.docs-angular-aria-banner-content a {
+a {
   color: var(--mat-sys-primary);
   text-decoration: underline;
   font-weight: 500;
 }
 
+p {
+  margin: 0;
+}
+
 @media (max-width: 600px) {
   .docs-angular-aria-banner {
     padding: 12px;
     gap: 8px;
   }
 
-  .docs-angular-aria-banner-icon {
+  mat-icon {
     font-size: 18px;
   }
 }
diff --git a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html
index 888cf5700406..e98063aa474e 100644
--- a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html
+++ b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html
@@ -1,16 +1,13 @@
 <div class="docs-angular-aria-banner">
-  <svg class="docs-angular-aria-banner-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-    width="24px">
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path
-      d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
-  </svg>
+  <mat-icon>info</mat-icon>
+
   <div class="docs-angular-aria-banner-content">
     <strong>Now Available in Angular Aria!</strong>
-    <br />
-    The Angular team has introduced a new low-level component library called Angular Aria.
-    Consider using the
-    <a [href]="ariaLink" target="_blank" rel="noopener">Angular Aria {{ componentName }}</a>
-    component as an alternative to this CDK component.
+    <p>
+      The Angular team has introduced a new low-level component library called Angular Aria.
+      Consider using the
+      <a [href]="ariaLink" target="_blank" rel="noopener">Angular Aria {{ componentName }}</a>
+      component as an alternative to this CDK component.
+    </p>
   </div>
 </div>
diff --git a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts
index cb4741730a83..4a23a0288986 100644
--- a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts
+++ b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts
@@ -7,6 +7,7 @@
  */
 
 import {Component, Input} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
 
 /**
  * Mapping of CDK component names to their Angular Aria documentation URLs.
@@ -26,6 +27,7 @@ const ANGULAR_ARIA_LINKS: Record<string, string> = {
   selector: 'angular-aria-banner',
   templateUrl: 'angular-aria-banner.html',
   styleUrl: 'angular-aria-banner.css',
+  imports: [MatIcon],
 })
 export class AngularAriaBanner {
   @Input() componentName: string = '';
diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.ts b/docs/src/app/shared/doc-viewer/doc-viewer.ts
index aba8ca165325..2fcc06ce5c29 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.ts
@@ -81,6 +81,7 @@ export class DocViewer implements OnDestroy {
   protected portal: Portal<any> | undefined;
 
   readonly name = input<string>();
+  readonly packageName = input<string>();
 
   /** The document to display, either as a URL to a markdown file or a component to create. */
   @Input()
@@ -277,9 +278,13 @@ export class DocViewer implements OnDestroy {
    */
   private _injectAngularAriaBanner() {
     const componentName = this.name();
-    const componentsWithAriaBanner = ['listbox', 'tree', 'accordion', 'menu'];
+    const packageName = this.packageName();
 
-    if (!componentName || !componentsWithAriaBanner.includes(componentName.toLowerCase())) {
+    if (
+      !componentName ||
+      packageName !== 'cdk' ||
+      !['listbox', 'tree', 'accordion', 'menu'].includes(componentName.toLowerCase())
+    ) {
       return;
     }
 
@@ -289,12 +294,7 @@ export class DocViewer implements OnDestroy {
     bannerContainer.setAttribute('componentName', componentName);
 
     // Insert the banner at the beginning of the document content
-    const firstChild = this._elementRef.nativeElement.firstChild;
-    if (firstChild) {
-      this._elementRef.nativeElement.insertBefore(bannerContainer, firstChild);
-    } else {
-      this._elementRef.nativeElement.appendChild(bannerContainer);
-    }
+    this._elementRef.nativeElement.prepend(bannerContainer);
 
     // Create and attach the banner component
     const portalHost = new DomPortalOutlet(bannerContainer, this._appRef, this._injector);