build: docs site not applying button directive (angular#30970)

Fixes that the nav bar wasn't importing `MatIconAnchor` which meant that one button looked weird on smaller screens.

Author: crisbeto

docs/src/app/shared/navbar/navbar.html

@@ -2,12 +2,12 @@
 <nav class="docs-navbar-header" aria-label="Top Toolbar">
   @if (skipLinkHidden) {
     <div class="skip-link-wrapper" [class.cdk-visually-hidden]="skipLinkHidden">
-      <a mat-raised-button [href]="skipLinkHref" (focus)="skipLinkHidden = false" (blur)="skipLinkHidden = true" color="accent">
+      <a matButton="elevated" [href]="skipLinkHref" (focus)="skipLinkHidden = false" (blur)="skipLinkHidden = true" color="accent">
         Skip to main content
       </a>
     </div>
   }
-  <a mat-button routerLink="/" aria-label="Angular Material">
+  <a matButton="text" routerLink="/" aria-label="Angular Material">
     <app-logo matButtonIcon/>
     Material
 
@@ -17,30 +17,30 @@
   </a>
 
   @for (key of sectionKeys; track key) {
-    <a mat-button class="docs-navbar-hide-small"
+    <a matButton="text" class="docs-navbar-hide-small"
        [routerLink]="key"
        routerLinkActive="docs-navbar-header-item-selected">{{sections[key].name}}</a>
   }
-  <a mat-button class="docs-navbar-hide-small" routerLink="guides" routerLinkActive="docs-navbar-header-item-selected">Guides</a>
+  <a matButton="text" class="docs-navbar-hide-small" routerLink="guides" routerLinkActive="docs-navbar-header-item-selected">Guides</a>
   <div class="flex-spacer"></div>
-  <version-picker></version-picker>
-  <theme-picker></theme-picker>
-  <a mat-button class="docs-navbar-hide-small" href="https://github.com/angular/components"
+  <version-picker/>
+  <theme-picker/>
+  <a matButton="text" class="docs-navbar-hide-small" href="https://github.com/angular/components"
      aria-label="GitHub Repository">
     <span matButtonIcon [ngTemplateOutlet]="githubIcon"></span>
     GitHub
   </a>
-  <a mat-icon-button class="docs-navbar-show-small"
+  <a matIconButton class="docs-navbar-show-small"
      href="https://github.com/angular/components" aria-label="GitHub Repository">
      <ng-container [ngTemplateOutlet]="githubIcon"/>
   </a>
 </nav>
 <nav class="docs-navbar docs-navbar-show-small" aria-label="Section Nav Bar">
   @for (key of sectionKeys; track key) {
-    <a mat-button class="docs-navbar-link"
+    <a matButton="text" class="docs-navbar-link"
       [routerLink]="key">{{sections[key].name}}</a>
   }
-  <a mat-button class="docs-navbar-link" routerLink="guides">Guides</a>
+  <a matButton="text" class="docs-navbar-link" routerLink="guides">Guides</a>
 </nav>
 
 

docs/src/app/shared/navbar/navbar.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy, inject} from '@angular/core';
 import {NgTemplateOutlet} from '@angular/common';
-import {MatAnchor} from '@angular/material/button';
+import {MatButton, MatIconButton} from '@angular/material/button';
 import {RouterLink, RouterLinkActive} from '@angular/router';
 
 import {SECTIONS} from '../documentation-items/documentation-items';
@@ -17,7 +17,8 @@ const SECTIONS_KEYS = Object.keys(SECTIONS);
   templateUrl: './navbar.html',
   styleUrls: ['./navbar.scss'],
   imports: [
-    MatAnchor,
+    MatButton,
+    MatIconButton,
     RouterLink,
     RouterLinkActive,
     VersionPicker,