mirror of
https://github.com/jpawlowski/hass.tibber_prices.git
synced 2026-03-29 21:03:40 +00:00
118 lines
No EOL
49 KiB
HTML
118 lines
No EOL
49 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-dynamic-icons" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.9.2">
|
||
<title data-rh="true">Dynamic Icons | Tibber Prices Integration</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://jpawlowski.github.io/hass.tibber_prices/user/img/social-card.png"><meta data-rh="true" name="twitter:image" content="https://jpawlowski.github.io/hass.tibber_prices/user/img/social-card.png"><meta data-rh="true" property="og:url" content="https://jpawlowski.github.io/hass.tibber_prices/user/dynamic-icons"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Dynamic Icons | Tibber Prices Integration"><meta data-rh="true" name="description" content="Many sensors in the Tibber Prices integration automatically change their icon based on their current state. This provides instant visual feedback about price levels, trends, and periods without needing to read the actual values."><meta data-rh="true" property="og:description" content="Many sensors in the Tibber Prices integration automatically change their icon based on their current state. This provides instant visual feedback about price levels, trends, and periods without needing to read the actual values."><link data-rh="true" rel="icon" href="/hass.tibber_prices/user/img/logo.svg"><link data-rh="true" rel="canonical" href="https://jpawlowski.github.io/hass.tibber_prices/user/dynamic-icons"><link data-rh="true" rel="alternate" href="https://jpawlowski.github.io/hass.tibber_prices/user/dynamic-icons" hreflang="en"><link data-rh="true" rel="alternate" href="https://jpawlowski.github.io/hass.tibber_prices/user/dynamic-icons" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Dynamic Icons","item":"https://jpawlowski.github.io/hass.tibber_prices/user/dynamic-icons"}]}</script><link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"><link rel="stylesheet" href="/hass.tibber_prices/user/assets/css/styles.be4f3d68.css">
|
||
<script src="/hass.tibber_prices/user/assets/js/runtime~main.624760e0.js" defer="defer"></script>
|
||
<script src="/hass.tibber_prices/user/assets/js/main.0445d6e2.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><link rel="preload" as="image" href="/hass.tibber_prices/user/img/logo.svg"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/hass.tibber_prices/user/"><div class="navbar__logo"><img src="/hass.tibber_prices/user/img/logo.svg" alt="Tibber Prices Integration Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/hass.tibber_prices/user/img/logo.svg" alt="Tibber Prices Integration Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Tibber Prices HA</b></a><a class="navbar__item navbar__link" href="/hass.tibber_prices/user/intro">User Guide</a><a href="https://jpawlowski.github.io/hass.tibber_prices/developer/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Developer Docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/hass.tibber_prices/user/dynamic-icons">Next 🚧</a><a href="https://github.com/jpawlowski/hass.tibber_prices" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/hass.tibber_prices/user/intro"><span title="User Documentation" class="linkLabel_WmDU">User Documentation</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/installation"><span title="🚀 Getting Started" class="categoryLinkLabel_W154">🚀 Getting Started</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/installation"><span title="Installation" class="linkLabel_WmDU">Installation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/configuration"><span title="Configuration" class="linkLabel_WmDU">Configuration</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/concepts"><span title="📖 Core Concepts" class="categoryLinkLabel_W154">📖 Core Concepts</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/concepts"><span title="Core Concepts" class="linkLabel_WmDU">Core Concepts</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/glossary"><span title="Glossary" class="linkLabel_WmDU">Glossary</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/hass.tibber_prices/user/sensors"><span title="📊 Features" class="categoryLinkLabel_W154">📊 Features</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/sensors"><span title="Sensors" class="linkLabel_WmDU">Sensors</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/period-calculation"><span title="Period Calculation" class="linkLabel_WmDU">Period Calculation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/hass.tibber_prices/user/dynamic-icons"><span title="Dynamic Icons" class="linkLabel_WmDU">Dynamic Icons</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/icon-colors"><span title="Dynamic Icon Colors" class="linkLabel_WmDU">Dynamic Icon Colors</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/actions"><span title="Actions (Services)" class="linkLabel_WmDU">Actions (Services)</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/dashboard-examples"><span title="🎨 Visualization" class="categoryLinkLabel_W154">🎨 Visualization</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/dashboard-examples"><span title="Dashboard Examples" class="linkLabel_WmDU">Dashboard Examples</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/chart-examples"><span title="Chart Examples" class="linkLabel_WmDU">Chart Examples</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/automation-examples"><span title="🤖 Automation" class="categoryLinkLabel_W154">🤖 Automation</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/automation-examples"><span title="Automation Examples" class="linkLabel_WmDU">Automation Examples</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/faq"><span title="🔧 Help & Support" class="categoryLinkLabel_W154">🔧 Help & Support</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/faq"><span title="FAQ - Frequently Asked Questions" class="linkLabel_WmDU">FAQ - Frequently Asked Questions</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/troubleshooting"><span title="Troubleshooting" class="linkLabel_WmDU">Troubleshooting</span></a></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="theme-doc-version-banner alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for <!-- -->Tibber Prices Integration<!-- --> <b>Next 🚧</b> version.</div><div class="margin-top--md">For up-to-date documentation, see the <b><a href="/hass.tibber_prices/user/dynamic-icons">latest version</a></b> (<!-- -->Next 🚧<!-- -->).</div></div><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/hass.tibber_prices/user/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">📊 Features</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Dynamic Icons</span></li></ul></nav><span class="theme-doc-version-badge badge badge--secondary">Version: Next 🚧</span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Dynamic Icons</h1></header>
|
||
<p>Many sensors in the Tibber Prices integration automatically change their icon based on their current state. This provides instant visual feedback about price levels, trends, and periods without needing to read the actual values.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-are-dynamic-icons">What are Dynamic Icons?<a href="#what-are-dynamic-icons" class="hash-link" aria-label="Direct link to What are Dynamic Icons?" title="Direct link to What are Dynamic Icons?" translate="no"></a></h2>
|
||
<p>Instead of having a fixed icon, some sensors update their icon to reflect their current state:</p>
|
||
<ul>
|
||
<li class=""><strong>Price level sensors</strong> show different cash/money icons depending on whether prices are cheap or expensive</li>
|
||
<li class=""><strong>Price rating sensors</strong> show thumbs up/down based on how the current price compares to average</li>
|
||
<li class=""><strong>Volatility sensors</strong> show different chart types based on price stability</li>
|
||
<li class=""><strong>Binary sensors</strong> show different icons when ON vs OFF (e.g., piggy bank when in best price period)</li>
|
||
</ul>
|
||
<p>The icons change automatically - no configuration needed!</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-to-check-if-a-sensor-has-dynamic-icons">How to Check if a Sensor Has Dynamic Icons<a href="#how-to-check-if-a-sensor-has-dynamic-icons" class="hash-link" aria-label="Direct link to How to Check if a Sensor Has Dynamic Icons" title="Direct link to How to Check if a Sensor Has Dynamic Icons" translate="no"></a></h2>
|
||
<p>To see which icon a sensor currently uses:</p>
|
||
<ol>
|
||
<li class="">Go to <strong>Developer Tools</strong> → <strong>States</strong> in Home Assistant</li>
|
||
<li class="">Search for your sensor (e.g., <code>sensor.tibber_home_current_interval_price_level</code>)</li>
|
||
<li class="">Look at the icon displayed in the entity row</li>
|
||
<li class="">Change conditions (wait for price changes) and check if the icon updates</li>
|
||
</ol>
|
||
<p><strong>Common sensor types with dynamic icons:</strong></p>
|
||
<ul>
|
||
<li class="">Price level sensors (e.g., <code>current_interval_price_level</code>)</li>
|
||
<li class="">Price rating sensors (e.g., <code>current_interval_price_rating</code>)</li>
|
||
<li class="">Volatility sensors (e.g., <code>volatility_today</code>)</li>
|
||
<li class="">Binary sensors (e.g., <code>best_price_period</code>, <code>peak_price_period</code>)</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="using-dynamic-icons-in-your-dashboard">Using Dynamic Icons in Your Dashboard<a href="#using-dynamic-icons-in-your-dashboard" class="hash-link" aria-label="Direct link to Using Dynamic Icons in Your Dashboard" title="Direct link to Using Dynamic Icons in Your Dashboard" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="standard-entity-cards">Standard Entity Cards<a href="#standard-entity-cards" class="hash-link" aria-label="Direct link to Standard Entity Cards" title="Direct link to Standard Entity Cards" translate="no"></a></h3>
|
||
<p>Dynamic icons work automatically in standard Home Assistant cards:</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> entities</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entities</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_volatility_today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_best_price_period</span><br></span></code></pre></div></div>
|
||
<p>The icons will update automatically as the sensor states change.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="glance-card">Glance Card<a href="#glance-card" class="hash-link" aria-label="Direct link to Glance Card" title="Direct link to Glance Card" translate="no"></a></h3>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> glance</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entities</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_best_price_period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Best Price</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="custom-button-card">Custom Button Card<a href="#custom-button-card" class="hash-link" aria-label="Direct link to Custom Button Card" title="Direct link to Custom Button Card" translate="no"></a></h3>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Current Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Icon updates automatically - no need to specify it!</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="mushroom-entity-card">Mushroom Entity Card<a href="#mushroom-entity-card" class="hash-link" aria-label="Direct link to Mushroom Entity Card" title="Direct link to Mushroom Entity Card" translate="no"></a></h3>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">mushroom</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">entity</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_volatility_today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Volatility</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Icon changes automatically based on volatility level</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="overriding-dynamic-icons">Overriding Dynamic Icons<a href="#overriding-dynamic-icons" class="hash-link" aria-label="Direct link to Overriding Dynamic Icons" title="Direct link to Overriding Dynamic Icons" translate="no"></a></h2>
|
||
<p>If you want to use a fixed icon instead of the dynamic one:</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="in-entity-cards">In Entity Cards<a href="#in-entity-cards" class="hash-link" aria-label="Direct link to In Entity Cards" title="Direct link to In Entity Cards" translate="no"></a></h3>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> entities</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entities</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">lightning</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">bolt </span><span class="token comment" style="color:#999988;font-style:italic"># Fixed icon, won't change</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="in-custom-button-card">In Custom Button Card<a href="#in-custom-button-card" class="hash-link" aria-label="Direct link to In Custom Button Card" title="Direct link to In Custom Button Card" translate="no"></a></h3>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">chart</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">line </span><span class="token comment" style="color:#999988;font-style:italic"># Fixed icon overrides dynamic behavior</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="combining-with-dynamic-colors">Combining with Dynamic Colors<a href="#combining-with-dynamic-colors" class="hash-link" aria-label="Direct link to Combining with Dynamic Colors" title="Direct link to Combining with Dynamic Colors" translate="no"></a></h2>
|
||
<p>Dynamic icons work great together with dynamic colors! See the <strong><a class="" href="/hass.tibber_prices/user/icon-colors">Dynamic Icon Colors Guide</a></strong> for examples.</p>
|
||
<p><strong>Example: Dynamic icon AND color</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Current Price</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># Icon changes automatically (cheap/expensive cash icons)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<p>This gives you both:</p>
|
||
<ul>
|
||
<li class="">✅ Different icon based on state (e.g., cash-plus when cheap, cash-remove when expensive)</li>
|
||
<li class="">✅ Different color based on state (e.g., green when cheap, red when expensive)</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="icon-behavior-details">Icon Behavior Details<a href="#icon-behavior-details" class="hash-link" aria-label="Direct link to Icon Behavior Details" title="Direct link to Icon Behavior Details" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="binary-sensors">Binary Sensors<a href="#binary-sensors" class="hash-link" aria-label="Direct link to Binary Sensors" title="Direct link to Binary Sensors" translate="no"></a></h3>
|
||
<p>Binary sensors may have different icons for different states:</p>
|
||
<ul>
|
||
<li class=""><strong>ON state</strong>: Typically shows an active/alert icon</li>
|
||
<li class=""><strong>OFF state</strong>: May show different icons depending on whether future periods exist<!-- -->
|
||
<ul>
|
||
<li class="">Has upcoming periods: Timer/waiting icon</li>
|
||
<li class="">No upcoming periods: Sleep/inactive icon</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p><strong>Example:</strong> <code>binary_sensor.tibber_home_best_price_period</code></p>
|
||
<ul>
|
||
<li class="">When ON: Shows a piggy bank (good time to save money)</li>
|
||
<li class="">When OFF with future periods: Shows a timer (waiting for next period)</li>
|
||
<li class="">When OFF without future periods: Shows a sleep icon (no periods expected soon)</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="state-based-icons">State-Based Icons<a href="#state-based-icons" class="hash-link" aria-label="Direct link to State-Based Icons" title="Direct link to State-Based Icons" translate="no"></a></h3>
|
||
<p>Sensors with text states (like <code>cheap</code>, <code>normal</code>, <code>expensive</code>) typically show icons that match the meaning:</p>
|
||
<ul>
|
||
<li class="">Lower/better values → More positive icons</li>
|
||
<li class="">Higher/worse values → More cautionary icons</li>
|
||
<li class="">Normal/average values → Neutral icons</li>
|
||
</ul>
|
||
<p>The exact icons are chosen to be intuitive and meaningful in the Home Assistant ecosystem.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate="no"></a></h2>
|
||
<p><strong>Icon not changing:</strong></p>
|
||
<ul>
|
||
<li class="">Wait for the sensor state to actually change (prices update every 15 minutes)</li>
|
||
<li class="">Check in Developer Tools → States that the sensor state is changing</li>
|
||
<li class="">If you've set a custom icon in your card, it will override the dynamic icon</li>
|
||
</ul>
|
||
<p><strong>Want to see the icon code:</strong></p>
|
||
<ul>
|
||
<li class="">Look at the entity in Developer Tools → States</li>
|
||
<li class="">The <code>icon</code> attribute shows the current Material Design icon code (e.g., <code>mdi:cash-plus</code>)</li>
|
||
</ul>
|
||
<p><strong>Want different icons:</strong></p>
|
||
<ul>
|
||
<li class="">You can override icons in your card configuration (see examples above)</li>
|
||
<li class="">Or create a template sensor with your own icon logic</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="see-also">See Also<a href="#see-also" class="hash-link" aria-label="Direct link to See Also" title="Direct link to See Also" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><a class="" href="/hass.tibber_prices/user/icon-colors">Dynamic Icon Colors</a> - Color your icons based on state</li>
|
||
<li class=""><a class="" href="/hass.tibber_prices/user/sensors">Sensors Reference</a> - Complete list of available sensors</li>
|
||
<li class=""><a class="" href="/hass.tibber_prices/user/automation-examples">Automation Examples</a> - Use dynamic icons in automations</li>
|
||
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href="https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/dynamic-icons.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2025-12-06T01:37:06.000Z" itemprop="dateModified">Dec 6, 2025</time></b></span></div></div></footer><div style="margin-top:3rem"></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/hass.tibber_prices/user/period-calculation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Period Calculation</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/hass.tibber_prices/user/icon-colors"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Dynamic Icon Colors</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-are-dynamic-icons" class="table-of-contents__link toc-highlight">What are Dynamic Icons?</a></li><li><a href="#how-to-check-if-a-sensor-has-dynamic-icons" class="table-of-contents__link toc-highlight">How to Check if a Sensor Has Dynamic Icons</a></li><li><a href="#using-dynamic-icons-in-your-dashboard" class="table-of-contents__link toc-highlight">Using Dynamic Icons in Your Dashboard</a><ul><li><a href="#standard-entity-cards" class="table-of-contents__link toc-highlight">Standard Entity Cards</a></li><li><a href="#glance-card" class="table-of-contents__link toc-highlight">Glance Card</a></li><li><a href="#custom-button-card" class="table-of-contents__link toc-highlight">Custom Button Card</a></li><li><a href="#mushroom-entity-card" class="table-of-contents__link toc-highlight">Mushroom Entity Card</a></li></ul></li><li><a href="#overriding-dynamic-icons" class="table-of-contents__link toc-highlight">Overriding Dynamic Icons</a><ul><li><a href="#in-entity-cards" class="table-of-contents__link toc-highlight">In Entity Cards</a></li><li><a href="#in-custom-button-card" class="table-of-contents__link toc-highlight">In Custom Button Card</a></li></ul></li><li><a href="#combining-with-dynamic-colors" class="table-of-contents__link toc-highlight">Combining with Dynamic Colors</a></li><li><a href="#icon-behavior-details" class="table-of-contents__link toc-highlight">Icon Behavior Details</a><ul><li><a href="#binary-sensors" class="table-of-contents__link toc-highlight">Binary Sensors</a></li><li><a href="#state-based-icons" class="table-of-contents__link toc-highlight">State-Based Icons</a></li></ul></li><li><a href="#troubleshooting" class="table-of-contents__link toc-highlight">Troubleshooting</a></li><li><a href="#see-also" class="table-of-contents__link toc-highlight">See Also</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Documentation</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/hass.tibber_prices/user/intro">User Guide</a></li><li class="footer__item"><a href="https://jpawlowski.github.io/hass.tibber_prices/developer/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Developer Guide<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub Issues<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://community.home-assistant.io/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Home Assistant Community<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices/releases" target="_blank" rel="noopener noreferrer" class="footer__link-item">Release Notes<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Not affiliated with Tibber AS. Community-maintained custom integration. Built with Docusaurus.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |