fix(material/select): arrow not rendering correctly in high contrast …

…mode

Since all borders get rendered out in high contrast mode, we can't use a CSS triangle to
render out the `mat-select` dropdown arrow. These changes replace it with an SVG arrow.

Fixes #14207.

src/material/select/select.html

@@ -21,7 +21,14 @@
     </span>
   </div>
 
-  <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
+  <div class="mat-select-arrow-wrapper">
+      <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode -->
+      <div class="mat-select-arrow">
+        <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false">
+          <path d="M7 10l5 5 5-5z"/>
+        </svg>
+      </div>
+  </div>
 </div>
 
 <ng-template

src/material/select/select.scss

@@ -75,12 +75,21 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-select-arrow {
-  width: 0;
-  height: 0;
-  border-left: $mat-select-arrow-size solid transparent;
-  border-right: $mat-select-arrow-size solid transparent;
-  border-top: $mat-select-arrow-size solid;
   margin: 0 $mat-select-arrow-margin;
+  width: $mat-select-arrow-size * 2;
+  height: $mat-select-arrow-size;
+  position: relative;
+
+  svg {
+    fill: currentColor;
+    position: absolute;
+
+    // Note that we use specific values here in order to position the arrow exactly
+    // where the old one used to be and to avoid screenshot diff failures.
+    top: 2px;
+    left: 5px;
+    transform: translate(-50%, -50%);
+  }
 }
 
 .mat-select-panel-wrap {