# Weather icons used in Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [17 March 2024 19:08 UTC](https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497 "2024-03-17T19:08:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![David83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/david83/32/89387_2.png) [@David83](https://discourse.nodered.org/u/David83)\
**Post date:** [17 March 2024 19:08 UTC](https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497/1 "2024-03-17T19:08:14Z")

</div>

Hello i'm a node-red newbe. This is my first post in thes forum ...

I found a discription to use weather-icons in the 'old' dashboard [... Flow showing Node-red ui OpenweatherMap ...](https://flows.nodered.org/flow/b5b7d5da14d24e71de447e6aa290937e/in/rekJJdGYekDB)

I try to transform this to 'dashboard 2.0'.

It seems to me thats not possebile to put 'msg.payload' to a 'class' entry of a dashboard 2.0 'template' ...

My code in the Template node looks like this:

```auto
<template>
    <div class="condition_icon">
        <i class="fa-4x wi {{msg.payload}}"></i>
    </div>
</template>

<style>
    @import "/weather-icons/mycss/weather-icons.min.css";

    .condition_icon {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
</style>

```

If i look in the HTML inside the Browser the result looks like:

```auto
<div class="condition_icon" state="[object Object]" style="grid-row-end: span 2;">
    <i class="fa-4x wi {{msg.payload}}"></i>
</div>

```

But i need ther the 'payload'.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [17 March 2024 19:34 UTC](https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497/2 "2024-03-17T19:34:54Z")

</div>

Hi @David83 - welcome to the forums, and thanks for the question

Under the covers, new Dashboard uses VueJS for it's `ui-template` node, so we follow that syntax.

In this case, you can use the `:` notation to define any attribute as dynamic.

With a dynamic class, if your `msg.payload` will explicitely be your class name, you can use:

```html
<i :class="'fa-4x wi ' + msg.payload">...</>

```

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [18 March 2024 19:48 UTC](https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497/3 "2024-03-18T19:48:23Z")

</div>

Hi @David83,  
I found some example cards that show weather information and I modified it to display data from OWM source. You may find it useful: [https://youtu.be/EESuQfSBYzo](https://youtu.be/EESuQfSBYzo)  
Sample flow is in the video description.

---

<div class="post-metadata">

**Author:** ![David83](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/david83/32/89387_2.png) [@David83](https://discourse.nodered.org/u/David83)\
**Post date:** [18 March 2024 20:27 UTC](https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497/4 "2024-03-18T20:27:16Z")

</div>

@joepavitt thanks that works fine 😃

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 April 2024 20:28 UTC](https://discourse.nodered.org/t/weather-icons-used-in-dashboard-2-0/86497/5 "2024-04-01T20:28:02Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.