diff --git a/src/components/device/ha-area-devices-picker.ts b/src/components/device/ha-area-devices-picker.ts
index 9a974c88f1..bfd61e7479 100644
--- a/src/components/device/ha-area-devices-picker.ts
+++ b/src/components/device/ha-area-devices-picker.ts
@@ -1,5 +1,5 @@
+import "@material/mwc-icon-button/mwc-icon-button";
import "@material/mwc-button/mwc-button";
-import "../ha-icon-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
@@ -38,6 +38,8 @@ import { SubscribeMixin } from "../../mixins/subscribe-mixin";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
import "./ha-devices-picker";
+import "../ha-svg-icon";
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
interface DevicesByArea {
[areaId: string]: AreaDevices;
@@ -62,7 +64,7 @@ const rowRenderer = (
margin: -10px 0;
padding: 0;
}
- ha-icon-button {
+ mwc-icon-button {
float: right;
}
.devices {
@@ -324,36 +326,34 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
autocorrect="off"
spellcheck="false"
>
- ${this.value
- ? html`
-
+ ${this.value
+ ? html`
- Clear
-
- `
- : ""}
- ${areas.length > 0
- ? html`
-
- Toggle
-
- `
- : ""}
+
+ `
+ : ""}
+ ${areas.length > 0
+ ? html`
+
+
+
+ `
+ : ""}
+
ha-icon-button {
- width: 24px;
- height: 24px;
- padding: 2px;
+ .suffix {
+ display: flex;
+ }
+ mwc-icon-button {
+ --mdc-icon-button-size: 24px;
+ padding: 0px 2px;
color: var(--secondary-text-color);
}
[hidden] {