fix(material/datepicker): revert breaking change on IE (#23786)

Reverts #23057 which accidentally introduced a breaking change for IE on the patch branch by using a `class` binding on an SVG element which requires a polyfill.

Author: crisbeto

src/material/datepicker/_datepicker-theme.scss

@@ -67,7 +67,7 @@ $calendar-weekday-table-font-size: 11px !default;
   $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
 
   .mat-calendar-arrow {
-    fill: theming.get-color-from-palette($foreground, icon);
+    border-top-color: theming.get-color-from-palette($foreground, icon);
   }
 
   // The prev/next buttons need a bit more specificity to

src/material/datepicker/calendar-header.html

@@ -5,10 +5,8 @@
             [attr.aria-describedby]="_buttonDescriptionId"
             cdkAriaLive="polite">
       <span [attr.id]="_buttonDescriptionId">{{periodButtonText}}</span>
-      <svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
-           viewBox="0 0 10 5" focusable="false">
-           <polygon points="0,0 5,5 10,0"/>
-      </svg>
+      <div class="mat-calendar-arrow"
+           [class.mat-calendar-invert]="calendar.currentView !== 'month'"></div>
     </button>
 
     <div class="mat-calendar-spacer"></div>

src/material/datepicker/calendar.scss

@@ -1,5 +1,4 @@
 @use '../core/style/layout-common';
-@use '../../cdk/a11y';
 
 $calendar-padding: 8px !default;
 $calendar-header-divider-width: 1px !default;
@@ -52,8 +51,12 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 .mat-calendar-arrow {
   display: inline-block;
-  width: $calendar-arrow-size * 2;
-  height: $calendar-arrow-size;
+  width: 0;
+  height: 0;
+  border-left: $calendar-arrow-size solid transparent;
+  border-right: $calendar-arrow-size solid transparent;
+  border-top-width: $calendar-arrow-size;
+  border-top-style: solid;
   margin: 0 0 0 $calendar-arrow-size;
   vertical-align: middle;
 
@@ -64,11 +67,6 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   [dir='rtl'] & {
     margin: 0 $calendar-arrow-size 0 0;
   }
-
-  @include a11y.high-contrast(active, off) {
-    // Setting the fill to `currentColor` doesn't work on Chromium browsers.
-    fill: CanvasText;
-  }
 }
 
 .mat-calendar-previous-button,