Centering mdi icons

Dashboard
1

Hi there,

I would like to switch from dashboard 1 to dashboard 2. I have some problems. I used weather icons in dashboard 1, but they are not supported in dashboard 2. So I have to use material design icons (mdi).

I added a template node and use the following command to show the icon:

<span class="mdi mdi-weather-sunny"></span>

I also added a template node for CSS formatting with the following lines:

.icons {
    font-size: 100px;
    justify-content: right;
    align-items: center;
}

I added the CSS style "icons" to my icon template node. The size has been changed correctly and the icon is centered vertically. How can I center it horizontally? The template node has a size of 6x3.

Screenshot 29.03.2025 um 14.25.03 PM
Screenshot 29.03.2025 um 14.25.03 PM424×160 2.69 KB

2 
.icons {
    font-size: 100px;
    justify-content: right;
    align-items: center;
    text-align: center;
}
3

Thank you. That's the solution:

.icons {
    align-items: center;
    text-align: center;
}

I have another question. I have a function node to select the weather icon depending on the weather conditions. How can I access the msg.payload in the template node?

The following code doesn't work.

<span class="{{msg.payload}}"></span>
4

From the ui-template node help:

Any variables that you want to render into your <template /> are done
 in one of two ways:

    Attribute Binding - Use : to bind a variable to an attribute. 
    Anything inside the double quotes "" is treated as JavaScript, for example:
   <p :class="msg.payload">Hello World</p>

  Or if you want to use msg.payload as part of the value, you can do this: 
   <p :class="'text-' + msg.payload">Hello World</p>

  Or with string literals:
   <p :class="`text-${msg.payload}`">Hello World</p>

And to include msg.payload inside an html element you use double braces

<p>{{msg.payload}}</p>
5

Thank you. Here's the solution:

<span :class="msg.payload"></span>