diff --git a/src/material/datepicker/_m3-datepicker.scss b/src/material/datepicker/_m3-datepicker.scss
index faee749ee433..262c93b0f958 100644
--- a/src/material/datepicker/_m3-datepicker.scss
+++ b/src/material/datepicker/_m3-datepicker.scss
@@ -56,7 +56,7 @@
       datepicker-range-input-disabled-state-text-color:
           m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
       datepicker-range-input-separator-color: map.get($system, on-surface),
-      datepicker-toggle-active-state-icon-color: map.get($system, on-surface-variant),
+      datepicker-toggle-active-state-icon-color: map.get($system, primary),
       datepicker-toggle-icon-color: map.get($system, on-surface-variant),
     ),
     typography: (
@@ -71,7 +71,4 @@
     ),
     density: (),
   );
-
-  $tokens: (
-  );
 }
diff --git a/src/material/datepicker/datepicker-toggle.scss b/src/material/datepicker/datepicker-toggle.scss
index 11fc04332a9d..f12d390eb3db 100644
--- a/src/material/datepicker/datepicker-toggle.scss
+++ b/src/material/datepicker/datepicker-toggle.scss
@@ -9,6 +9,10 @@ $fallbacks: m3-datepicker.get-tokens();
 .mat-datepicker-toggle {
   pointer-events: auto;
   color: token-utils.slot(datepicker-toggle-icon-color, $fallbacks);
+
+  button {
+    color: inherit;
+  }
 }
 
 .mat-datepicker-toggle-active {