From d8dedc9b7d1ea85e9e3b7a1256a6ad60d4a8a36b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:03:48 +0100
Subject: [PATCH] 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 4d3c22c00df0f3f5adeca0fe1adc8e750a2ab7c2)
---
 src/material/datepicker/calendar-header.html |  6 +++++
 src/material/datepicker/calendar.scss        | 27 --------------------
 2 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index 02f826cbb227..2e539ed68c97 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/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>
diff --git a/src/material/datepicker/calendar.scss b/src/material/datepicker/calendar.scss
index 91c0ee44827e..7471adae05ac 100644
--- a/src/material/datepicker/calendar.scss
+++ b/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,8 +87,6 @@ $_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) {
@@ -103,29 +94,11 @@ $_tokens: tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots()
     }
   }
 
-  &::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;