docs: prevent aria banner from showing up on Material (#32421)

The banner for Angular Aria was showing up for Material as well, because we weren't checking the package name.

These changes also fix some minor issues like using an inline SVG instead of `mat-icon`.

Fixes #32420.

Author: crisbeto

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)" />

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;
   }
 }

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>

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 = '';

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);