# Centering mdi icons

**URL:** <https://discourse.nodered.org/t/centering-mdi-icons/96325>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [29 March 2025 13:25 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325 "2025-03-29T13:25:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MKaiser96](https://avatars.discourse-cdn.com/v4/letter/m/8c91f0/32.png) [@MKaiser96](https://discourse.nodered.org/u/MKaiser96)\
**Post date:** [29 March 2025 13:25 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325/1 "2025-03-29T13:25:54Z")

</div>

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:

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

```

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

```auto
.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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef170d352e52b4a3e1e7eeceb2eb1417310d7fed.png)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [29 March 2025 15:06 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325/2 "2025-03-29T15:06:35Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![MKaiser96](https://avatars.discourse-cdn.com/v4/letter/m/8c91f0/32.png) [@MKaiser96](https://discourse.nodered.org/u/MKaiser96)\
**Post date:** [29 March 2025 15:38 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325/3 "2025-03-29T15:38:15Z")

</div>

Thank you. That's the solution:

```auto
.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.

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

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [29 March 2025 16:17 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325/4 "2025-03-29T16:17:54Z")

</div>

From the ui-template node help:

```auto
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

```auto
<p>{{msg.payload}}</p>

```

---

<div class="post-metadata">

**Author:** ![MKaiser96](https://avatars.discourse-cdn.com/v4/letter/m/8c91f0/32.png) [@MKaiser96](https://discourse.nodered.org/u/MKaiser96)\
**Post date:** [29 March 2025 16:30 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325/5 "2025-03-29T16:30:54Z")

</div>

Thank you. Here's the solution:

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

```

---

<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:** [12 April 2025 16:31 UTC](https://discourse.nodered.org/t/centering-mdi-icons/96325/6 "2025-04-12T16:31:14Z")

</div>

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