jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 07:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Icon Picker (#10161)

Browse Source
This commit is contained in:
Paul Bottein 2021-10-18 22:45:21 +02:00 committed by GitHub
parent 403c042235
commit 2770d1f36b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 226 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
build-scripts/gulp/gen-icons-json.js
View File

@ -22,17 +22,38 @@ const getMeta = () => {
const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
encoding,
});
return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
return {
path: svg.match(/ d="([^"]+)"/)[1],
name: icon.name,
tags: icon.tags,
};
});
};
const addRemovedMeta = (meta) => {
const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
const removed = JSON.parse(file);
const combinedMeta = [...meta, ...removed];
const removedMeta = removed.map((removeIcon) => ({
path: removeIcon.path,
name: removeIcon.name,
tags: [],
}));
const combinedMeta = [...meta, ...removedMeta];
return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
};
const homeAutomationTag = "Home Automation";
const orderMeta = (meta) => {
const homeAutomationMeta = meta.filter((icon) =>
icon.tags.includes(homeAutomationTag)
);
const otherMeta = meta.filter(
(icon) => !icon.tags.includes(homeAutomationTag)
);
return [...homeAutomationMeta, ...otherMeta];
};
const splitBySize = (meta) => {
const chunks = [];
const CHUNK_SIZE = 50000;
@ -77,8 +98,9 @@ const findDifferentiator = (curString, prevString) => {
};
gulp.task("gen-icons-json", (done) => {
const meta = addRemovedMeta(getMeta());
const split = splitBySize(meta);
const meta = getMeta();
const metaAndRemoved = addRemovedMeta(meta);
const split = splitBySize(metaAndRemoved);
if (!fs.existsSync(OUTPUT_DIR)) {
fs.mkdirSync(OUTPUT_DIR, { recursive: true });
@ -116,5 +138,12 @@ gulp.task("gen-icons-json", (done) => {
JSON.stringify({ version: package.version, parts })
);
const orderedMeta = orderMeta(meta);
fs.writeFileSync(
path.resolve(OUTPUT_DIR, "iconList.json"),
JSON.stringify(orderedMeta.map((icon) => icon.name))
);
done();
});

142
src/components/ha-icon-picker.ts Normal file
View File

@ -0,0 +1,142 @@
import "@polymer/paper-input/paper-input";
import { mdiCheck } from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit";
import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { PolymerChangedEvent } from "../polymer-types";
import "./ha-icon";
import iconList from "../../build/mdi/iconList.json";
const mdiIconList = iconList.map((icon) => `mdi:${icon}`);
// eslint-disable-next-line lit/prefer-static-styles
const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
paper-icon-item {
padding: 0;
margin: -8px;
}
#content {
display: flex;
align-items: center;
}
ha-svg-icon {
padding-left: 2px;
color: var(--secondary-text-color);
}
:host(:not([selected])) ha-svg-icon {
display: none;
}
:host([selected]) paper-icon-item {
margin-left: 0;
}
</style>
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
<paper-icon-item>
<ha-icon .icon=${item} slot="item-icon"></ha-icon>
<paper-item-body> ${item} </paper-item-body>
</paper-icon-item>`;
@customElement("ha-icon-picker")
export class HaIconPicker extends LitElement {
@property() public value?: string;
@property() public label?: string;
@property() public placeholder?: string;
@property({ attribute: "error-message" }) public errorMessage?: string;
@property({ type: Boolean }) public disabled = false;
@query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
@property({ type: Boolean }) private _opened = false;
protected render(): TemplateResult {
return html`
<vaadin-combo-box-light
item-value-path="icon"
item-label-path="icon"
.value=${this._value}
.allowCustomValue=${true}
.filteredItems=${[]}
${comboBoxRenderer(rowRenderer)}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
@filter-changed=${this._filterChanged}
>
<paper-input
.label=${this.label}
.placeholder=${this.placeholder}
.disabled=${this.disabled}
class="input"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
spellcheck="false"
>
${!this._opened && (this._value || this.placeholder)
? html`
<ha-icon .icon=${this._value || this.placeholder} slot="suffix">
</ha-icon>
`
: ""}
</paper-input>
</vaadin-combo-box-light>
`;
}
private _openedChanged(ev: PolymerChangedEvent<boolean>) {
this._opened = ev.detail.value;
}
private _valueChanged(ev: PolymerChangedEvent<string>) {
this._setValue(ev.detail.value);
}
private _setValue(value: string) {
this.value = value;
fireEvent(
this,
"value-changed",
{ value },
{
bubbles: false,
composed: false,
}
);
}
private _filterChanged(ev: CustomEvent): void {
const filterString = ev.detail.value.toLowerCase();
const characterCount = filterString.length;
if (characterCount >= 2) {
const filteredItems = mdiIconList.filter((icon) =>
icon.toLowerCase().includes(filterString)
);
if (filteredItems.length > 0) {
(this.comboBox as any).filteredItems = filteredItems;
} else {
(this.comboBox as any).filteredItems = [filterString];
}
} else {
(this.comboBox as any).filteredItems = [];
}
}
private get _value() {
return this.value || "";
}
static get styles() {
return css`
ha-icon {
position: absolute;
bottom: 2px;
right: 0;
}
`;
}
}

9
src/panels/config/entities/entity-registry-settings.ts
View File

@ -15,7 +15,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { domainIcon } from "../../../common/entity/domain_icon";
import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-input";
import "../../../components/ha-icon-picker";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
import {
@ -133,7 +133,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
.placeholder=${this.entry.original_name}
.disabled=${this._submitting}
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
@value-changed=${this._iconChanged}
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
@ -143,10 +143,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
this.hass.states[this.entry.entity_id]
)}
.disabled=${this._submitting}
.errorMessage=${this.hass.localize(
"ui.dialogs.entity_registry.editor.icon_error"
)}
></ha-icon-input>
></ha-icon-picker>
<paper-input
.value=${this._entityId}
@value-changed=${this._entityIdChanged}

6
src/panels/config/helpers/forms/ha-counter-form.ts
View File

@ -2,7 +2,7 @@ import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import type { HaSwitch } from "../../../../components/ha-switch";
import { Counter } from "../../../../data/counter";
@ -81,14 +81,14 @@ class HaCounterForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
<paper-input
.value=${this._minimum}
.configValue=${"minimum"}

6
src/panels/config/helpers/forms/ha-input_boolean-form.ts
View File

@ -2,7 +2,7 @@ import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { InputBoolean } from "../../../../data/input_boolean";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -59,14 +59,14 @@ class HaInputBooleanForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
</div>
`;
}

6
src/panels/config/helpers/forms/ha-input_datetime-form.ts
View File

@ -4,7 +4,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { InputDateTime } from "../../../../data/input_datetime";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -70,14 +70,14 @@ class HaInputDateTimeForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
<br />
${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
<br />

6
src/panels/config/helpers/forms/ha-input_number-form.ts
View File

@ -4,7 +4,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -85,14 +85,14 @@ class HaInputNumberForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
<paper-input
.value=${this._min}
.configValue=${"min"}

6
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@ -8,7 +8,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import type { InputSelect } from "../../../../data/input_select";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
@ -72,14 +72,14 @@ class HaInputSelectForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
${this.hass!.localize(
"ui.dialogs.helper_settings.input_select.options"
)}:

6
src/panels/config/helpers/forms/ha-input_text-form.ts
View File

@ -4,7 +4,7 @@ import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { InputText } from "../../../../data/input_text";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -76,14 +76,14 @@ class HaInputTextForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
${this.hass.userData?.showAdvanced
? html`
<paper-input

6
src/panels/config/helpers/forms/ha-timer-form.ts
View File

@ -1,7 +1,7 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { DurationDict, Timer } from "../../../../data/timer";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@ -62,14 +62,14 @@ class HaTimerForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
.label=${this.hass!.localize(
"ui.dialogs.helper_settings.generic.icon"
)}
></ha-icon-input>
></ha-icon-picker>
<paper-input
.configValue=${"duration"}
.value=${this._duration}

6
src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
View File

@ -5,7 +5,7 @@ import { slugify } from "../../../../common/string/slugify";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import type { HaSwitch } from "../../../../components/ha-switch";
import {
@ -118,13 +118,13 @@ export class DialogLovelaceDashboardDetail extends LitElement {
)}
dialogInitialFocus
></paper-input>
<ha-icon-input
<ha-icon-picker
.value=${this._icon}
@value-changed=${this._iconChanged}
.label=${this.hass.localize(
"ui.panel.config.lovelace.dashboards.detail.icon"
)}
></ha-icon-input>
></ha-icon-picker>
${!this._params.dashboard && this.hass.userData?.showAdvanced
? html`
<paper-input

6
src/panels/config/scene/ha-scene-editor.ts
View File

@ -31,7 +31,7 @@ import "../../../components/entity/ha-entities-picker";
import "../../../components/ha-card";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-input";
import "../../../components/ha-icon-picker";
import "../../../components/ha-svg-icon";
import {
computeDeviceName,
@ -278,7 +278,7 @@ export class HaSceneEditor extends SubscribeMixin(
"ui.panel.config.scene.editor.name"
)}
></paper-input>
<ha-icon-input
<ha-icon-picker
.label=${this.hass.localize(
"ui.panel.config.scene.editor.icon"
)}
@ -286,7 +286,7 @@ export class HaSceneEditor extends SubscribeMixin(
.value=${this._config.icon}
@value-changed=${this._valueChanged}
>
</ha-icon-input>
</ha-icon-picker>
</div>
</ha-card>
</ha-config-section>

6
src/panels/config/script/ha-script-editor.ts
View File

@ -30,7 +30,7 @@ import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-input";
import "../../../components/ha-icon-picker";
import "../../../components/ha-svg-icon";
import "../../../components/ha-yaml-editor";
import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
@ -213,7 +213,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
@change=${this._aliasChanged}
>
</paper-input>
<ha-icon-input
<ha-icon-picker
.label=${this.hass.localize(
"ui.panel.config.script.editor.icon"
)}
@ -221,7 +221,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
.value=${this._config.icon}
@value-changed=${this._valueChanged}
>
</ha-icon-input>
</ha-icon-picker>
${!this.scriptEntityId
? html`<paper-input
.label=${this.hass.localize(

6
src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
View File

@ -6,7 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stateIcon } from "../../../../common/entity/state_icon";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -133,7 +133,7 @@ export class HuiButtonCardEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-input
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
@ -144,7 +144,7 @@ export class HuiButtonCardEditor
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
></ha-icon-picker>
</div>
<div class="side-by-side">
<div>

6
src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
View File

@ -5,7 +5,7 @@ import { assert, assign, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/entity/ha-entity-attribute-picker";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { HomeAssistant } from "../../../../types";
import { EntityCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
@ -103,7 +103,7 @@ export class HuiEntityCardEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-input
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
@ -114,7 +114,7 @@ export class HuiEntityCardEditor
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
></ha-icon-picker>
</div>
<div class="side-by-side">
<ha-entity-attribute-picker

6
src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
View File

@ -6,7 +6,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { computeDomain } from "../../../../common/entity/compute_domain";
import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import { EntitiesCardEntityConfig } from "../../cards/types";
@ -83,7 +83,7 @@ export class HuiGenericEntityRowEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-input
<ha-icon-picker
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)}
@ -91,7 +91,7 @@ export class HuiGenericEntityRowEditor
.placeholder=${stateIcon(this.hass!.states[this._config.entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
></ha-icon-picker>
</div>
<paper-dropdown-menu .label=${"Secondary Info"}>
<paper-listbox

6
src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
View File

@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import { assert, object, optional, string, assign } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { LightCardConfig } from "../../cards/types";
@ -109,7 +109,7 @@ export class HuiLightCardEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-input
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
@ -120,7 +120,7 @@ export class HuiLightCardEditor
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
></ha-icon-picker>
</div>
<hui-theme-select-editor

6
src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
View File

@ -9,7 +9,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import { SensorCardConfig } from "../../cards/types";
@ -114,7 +114,7 @@ export class HuiSensorCardEditor
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<ha-icon-input
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
@ -125,7 +125,7 @@ export class HuiSensorCardEditor
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
></ha-icon-picker>
<paper-dropdown-menu
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.sensor.graph_type"

6
src/panels/lovelace/editor/view-editor/hui-view-editor.ts
View File

@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { slugify } from "../../../../common/string/slugify";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-input";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import { LovelaceViewConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -94,7 +94,7 @@ export class HuiViewEditor extends LitElement {
@value-changed=${this._valueChanged}
@blur=${this._handleTitleBlur}
></paper-input>
<ha-icon-input
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
@ -104,7 +104,7 @@ export class HuiViewEditor extends LitElement {
.placeholder=${this._icon}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
></ha-icon-picker>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.url"