diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
new file mode 100644
index 0000000000..55daec0349
--- /dev/null
+++ b/src/components/ha-textfield.ts
@@ -0,0 +1,25 @@
+import { TextField } from "@material/mwc-textfield";
+import { TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-textfield")
+export class HaTextField extends TextField {
+ override renderIcon(_icon: string, isTrailingIcon = false): TemplateResult {
+ const type = isTrailingIcon ? "trailing" : "leading";
+
+ return html`
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-textfield": HaTextField;
+ }
+}
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 6ae9e25264..55b535a847 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1,3 +1,4 @@
+import "../../components/ha-textfield";
import { Layout1d, scroll } from "@lit-labs/virtualizer";
import "@material/mwc-list/mwc-list";
import type { List } from "@material/mwc-list/mwc-list";
@@ -98,7 +99,7 @@ export class QuickBar extends LitElement {
@state() private _hint?: string;
- @query("paper-input", false) private _filterInputField?: HTMLElement;
+ @query("ha-textfield", false) private _filterInputField?: HTMLElement;
private _focusSet = false;
@@ -143,28 +144,32 @@ export class QuickBar extends LitElement {
hideActions
>
-
${this._search}` : this._search}
+ .icon=${true}
+ .iconTrailing=${this._search !== undefined}
+ @input=${this._handleSearchChange}
@keydown=${this._handleInputKeyDown}
@focus=${this._setFocusFirstListItem}
>
${this._commandMode
? html`
`
: html`
@@ -172,13 +177,13 @@ export class QuickBar extends LitElement {
${this._search &&
html`
`}
-
+
${this._narrow
? html`