diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts
index a6e69ee858..59269bde4a 100644
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@@ -1,6 +1,6 @@
 import { SelectBase } from "@material/mwc-select/mwc-select-base";
 import { styles } from "@material/mwc-select/mwc-select.css";
-import { html, nothing } from "lit";
+import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { debounce } from "../common/util/debounce";
 import { nextRender } from "../common/util/render-status";
@@ -20,8 +20,6 @@ export class HaSelect extends SelectBase {
     ></span>`;
   }
 
-  static override styles = [styles];
-
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("translations-updated", this._translationsUpdated);
@@ -39,6 +37,15 @@ export class HaSelect extends SelectBase {
     await nextRender();
     this.layoutOptions();
   }, 500);
+
+  static override styles = [
+    styles,
+    css`
+      .mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
+        color: var(--secondary-text-color);
+      }
+    `,
+  ];
 }
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index f25225a9ed..8478d2abe4 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -53,6 +53,10 @@ export class HaTextField extends TextFieldBase {
         padding-right: var(--text-field-suffix-padding-right, 0px);
       }
 
+      .mdc-text-field__icon {
+        color: var(--secondary-text-color);
+      }
+
       input {
         text-align: var(--text-field-text-align);
       }