mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
Use ha-icon when user can set icon (#1399)
This commit is contained in:
parent
e5c900aec1
commit
ad4814dfad
@ -1,8 +1,8 @@
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import '../components/ha-card.js';
|
||||
import '../components/ha-icon.js';
|
||||
|
||||
import computeStateName from '../common/entity/compute_state_name.js';
|
||||
import EventsMixin from '../mixins/events-mixin.js';
|
||||
@ -44,7 +44,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
|
||||
.has-plant-image .content {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
iron-icon {
|
||||
ha-icon {
|
||||
color: var(--paper-item-icon-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -70,7 +70,7 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
|
||||
<div class="content">
|
||||
<template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
|
||||
<div class="attributes" on-click="attributeClicked">
|
||||
<div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
|
||||
<div><ha-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></ha-icon></div>
|
||||
<div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
|
||||
[[computeValue(stateObj.attributes, item)]]
|
||||
</div>
|
||||
|
@ -1,8 +1,8 @@
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import '../components/ha-card.js';
|
||||
import '../components/ha-icon.js';
|
||||
|
||||
import EventsMixin from '../mixins/events-mixin.js';
|
||||
import LocalizeMixin from '../mixins/localize-mixin.js';
|
||||
@ -23,7 +23,7 @@ class HaWeatherCard extends
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
ha-icon {
|
||||
color: var(--paper-item-icon-color);
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ class HaWeatherCard extends
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.main iron-icon {
|
||||
.main ha-icon {
|
||||
--iron-icon-height: 72px;
|
||||
--iron-icon-width: 72px;
|
||||
margin-right: 8px;
|
||||
@ -94,7 +94,7 @@ class HaWeatherCard extends
|
||||
<div class="now">
|
||||
<div class="main">
|
||||
<template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
|
||||
<iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
|
||||
<ha-icon icon="[[getWeatherIcon(stateObj.state)]]"></ha-icon>
|
||||
</template>
|
||||
<div class="temp">
|
||||
[[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
|
||||
@ -135,7 +135,7 @@ class HaWeatherCard extends
|
||||
</div>
|
||||
<template is="dom-if" if="[[item.condition]]">
|
||||
<div class="icon">
|
||||
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
|
||||
<ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon>
|
||||
</div>
|
||||
</template>
|
||||
<div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
import './ha-icon.js';
|
||||
|
||||
class HaLabelBadge extends PolymerElement {
|
||||
static get template() {
|
||||
@ -83,7 +83,7 @@ class HaLabelBadge extends PolymerElement {
|
||||
<div class="badge-container">
|
||||
<div class="label-badge" id="badge">
|
||||
<div class$="[[computeValueClasses(value)]]">
|
||||
<iron-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></iron-icon>
|
||||
<ha-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></ha-icon>
|
||||
<span hidden$="[[computeHideValue(value, image)]]">[[value]]</span>
|
||||
</div>
|
||||
<div hidden$="[[computeHideLabel(label)]]" class$="[[computeLabelClasses(label)]]">
|
||||
|
@ -1,8 +1,8 @@
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import './ha-paper-slider.js';
|
||||
import './ha-icon.js';
|
||||
|
||||
class HaLabeledSlider extends PolymerElement {
|
||||
static get template() {
|
||||
@ -18,7 +18,7 @@ class HaLabeledSlider extends PolymerElement {
|
||||
opacity: var(--dark-primary-opacity);
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
ha-icon {
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
opacity: var(--dark-secondary-opacity);
|
||||
@ -34,7 +34,7 @@ class HaLabeledSlider extends PolymerElement {
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
<div class="slider-container">
|
||||
<iron-icon icon="[[icon]]" hidden$="[[!icon]]"></iron-icon>
|
||||
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
|
||||
<ha-paper-slider
|
||||
min="[[min]]" max="[[max]]" step="[[step]]"
|
||||
pin="[[pin]]" disabled="[[disabled]]" disabled="[[disabled]]"
|
||||
|
@ -3,7 +3,6 @@ import '@polymer/app-layout/app-scroll-effects/effects/waterfall.js';
|
||||
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
|
||||
import '@polymer/app-route/app-route.js';
|
||||
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
import '@polymer/iron-pages/iron-pages.js';
|
||||
import '@polymer/paper-tabs/paper-tab.js';
|
||||
import '@polymer/paper-tabs/paper-tabs.js';
|
||||
@ -11,6 +10,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import '../components/ha-cards.js';
|
||||
import '../components/ha-icon.js';
|
||||
import '../components/ha-menu-button.js';
|
||||
import '../components/ha-start-voice-button.js';
|
||||
|
||||
@ -69,7 +69,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
|
||||
</template>
|
||||
<template is="dom-if" if="[[defaultView]]">
|
||||
<template is="dom-if" if="[[defaultView.attributes.icon]]">
|
||||
<iron-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
|
||||
<ha-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></ha-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!defaultView.attributes.icon]]">
|
||||
[[_computeStateName(defaultView)]]
|
||||
@ -79,7 +79,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
|
||||
<template is="dom-repeat" items="[[views]]">
|
||||
<paper-tab data-entity$="[[item.entity_id]]" on-click="scrollToTop">
|
||||
<template is="dom-if" if="[[item.attributes.icon]]">
|
||||
<iron-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
|
||||
<ha-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></ha-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!item.attributes.icon]]">
|
||||
[[_computeStateName(item)]]
|
||||
|
@ -1,14 +1,6 @@
|
||||
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
|
||||
import '@polymer/app-layout/app-header/app-header.js';
|
||||
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
|
||||
import '@polymer/paper-button/paper-button.js';
|
||||
import '@polymer/paper-icon-button/paper-icon-button.js';
|
||||
import '@polymer/paper-tabs/paper-tab.js';
|
||||
import '@polymer/paper-tabs/paper-tabs.js';
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
import '@polymer/paper-button/paper-button.js';
|
||||
|
||||
import '../../layouts/hass-loading-screen.js';
|
||||
import '../../layouts/hass-error-screen.js';
|
||||
|
@ -5,7 +5,6 @@ import '@polymer/app-route/app-route.js';
|
||||
import '@polymer/paper-icon-button/paper-icon-button.js';
|
||||
import '@polymer/paper-tabs/paper-tab.js';
|
||||
import '@polymer/paper-tabs/paper-tabs.js';
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
@ -17,6 +16,7 @@ import NavigateMixin from '../../mixins/navigate-mixin.js';
|
||||
|
||||
import '../../layouts/ha-app-layout.js';
|
||||
import '../../components/ha-start-voice-button.js';
|
||||
import '../../components/ha-icon.js';
|
||||
import { loadModule, loadJS } from '../../common/dom/load_resource.js';
|
||||
import './hui-view.js';
|
||||
|
||||
@ -65,7 +65,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
|
||||
<template is="dom-repeat" items="[[config.views]]">
|
||||
<paper-tab>
|
||||
<template is="dom-if" if="[[item.icon]]">
|
||||
<iron-icon title$="[[item.title]]" icon="[[item.icon]]"></iron-icon>
|
||||
<ha-icon title$="[[item.title]]" icon="[[item.icon]]"></ha-icon>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!item.icon]]">
|
||||
[[_computeTabTitle(item.title)]]
|
||||
|
@ -1,10 +1,10 @@
|
||||
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
|
||||
import '@polymer/iron-icon/iron-icon.js';
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
import Leaflet from 'leaflet';
|
||||
|
||||
import '../../components/ha-menu-button.js';
|
||||
import '../../components/ha-icon.js';
|
||||
|
||||
import './ha-entity-marker.js';
|
||||
|
||||
@ -126,8 +126,9 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
|
||||
// create icon
|
||||
var iconHTML = '';
|
||||
if (entity.attributes.icon) {
|
||||
iconHTML = (
|
||||
"<iron-icon icon='" + entity.attributes.icon + "'></iron-icon>");
|
||||
const el = document.createElement('ha-icon');
|
||||
el.setAttribute('icon', entity.attributes.icon);
|
||||
iconHTML = el.outerHTML;
|
||||
} else {
|
||||
iconHTML = title;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user