fix(material/datepicker): use SVG icons for calendar (#29957)

The calendar's next/previous icons are currently rendered using an `:after` element, borders and a transform. This makes them hard to position accurately and fragile to changes in the container size. These changes switch to using SVG which is more robust.

Fixes #29956.

(cherry picked from commit 4d3c22c)

Author: crisbeto

src/material/datepicker/calendar-header.html

@@ -21,11 +21,17 @@
     <button mat-icon-button type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
             [attr.aria-label]="prevButtonLabel">
+      <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+       </svg>
     </button>
 
     <button mat-icon-button type="button" class="mat-calendar-next-button"
             [disabled]="!nextEnabled()" (click)="nextClicked()"
             [attr.aria-label]="nextButtonLabel">
+      <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+      </svg>
     </button>
   </div>
 </div>

src/material/datepicker/calendar.scss

@@ -1,6 +1,5 @@
 @use '@angular/cdk';
 
-@use '../core/style/layout-common';
 @use '../core/focus-indicators/private';
 @use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
 @use '../core/tokens/token-utils';
@@ -16,12 +15,6 @@ $calendar-controls-side-margin: calc(33% / 7 - 16px);
 $calendar-arrow-size: 5px !default;
 $calendar-arrow-disabled-opacity: 0.5 !default;
 
-// Values chosen to approximate https://material.io/icons/#ic_navigate_before and
-// https://material.io/icons/#ic_navigate_next as closely as possible.
-$calendar-prev-next-icon-border-width: 2px;
-$calendar-prev-next-icon-margin: 15.5px;
-$calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
-$calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots();
 
 .mat-calendar {
@@ -94,38 +87,18 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()
 
 .mat-calendar-previous-button,
 .mat-calendar-next-button {
-  position: relative;
-
   @include token-utils.use-tokens($_tokens...) {
     // Needs need a bit more specificity to avoid being overwritten by the .mat-icon-button.
     .mat-datepicker-content &:not(.mat-mdc-button-disabled) {
       @include token-utils.create-token-slot(color, calendar-navigation-button-icon-color);
     }
   }
 
-  &::after {
-    @include layout-common.fill;
-    content: '';
-    margin: $calendar-prev-next-icon-margin;
-    border: 0 solid currentColor;
-    border-top-width: $calendar-prev-next-icon-border-width;
-  }
-
   [dir='rtl'] & {
     transform: rotate(180deg);
   }
 }
 
-.mat-calendar-previous-button::after {
-  border-left-width: $calendar-prev-next-icon-border-width;
-  transform: $calendar-prev-icon-transform;
-}
-
-.mat-calendar-next-button::after {
-  border-right-width: $calendar-prev-next-icon-border-width;
-  transform: $calendar-next-icon-transform;
-}
-
 .mat-calendar-table {
   border-spacing: 0;
   border-collapse: collapse;