diff --git a/src/material-experimental/mdc-select/select.html b/src/material-experimental/mdc-select/select.html
index ec8d4f773f4f..dd899f304465 100644
--- a/src/material-experimental/mdc-select/select.html
+++ b/src/material-experimental/mdc-select/select.html
@@ -21,7 +21,14 @@
     </span>
   </div>
 
-  <div class="mat-mdc-select-arrow-wrapper"><div class="mat-mdc-select-arrow"></div></div>
+  <div class="mat-mdc-select-arrow-wrapper">
+    <div class="mat-mdc-select-arrow">
+      <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
+      <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
diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index f414c74951ff..1c321fd5aa32 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -60,12 +60,18 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-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;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }
 
 // Note that the `.mdc-menu-surface` is here in order to bump up the specificity