# Add icon to Dashboard topbar

**URL:** <https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210>\
**Category:** Dashboard\
**Created:** [28 December 2018 20:56 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210 "2018-12-28T20:56:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [28 December 2018 20:56 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/1 "2018-12-28T20:56:53Z")

</div>

I'm adding some elements to topbar in Dashboard like clock and battery status. I wanted to add icon of battery too as I'm using WallPanel Android app which is fullscreen so covering original battery status.

Anyway, I can't use `<ng-md-icon icon="battery_charging_50"></ng-md-icon>` syntax as it's not rendered in the toolbar. If I would choose font-awesome then it would be as easy as using `<i class="fa fa-battery-quarter"></i>` syntax. However, FA has limited battery icons and in horizontal (wide) versions only. Material icons on the other hand has all I need (many levels, charging indicator, narrow vertical mode) but `<ng-md-icon>` renders to `svg` thus it's not so easy to use as FA icons.

My question is: is there a simple way of using material icons added by JS to topbar?

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [31 December 2018 12:13 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/2 "2018-12-31T12:13:34Z")

</div>

I've additionally tried to put `<ui-icon icon="face"></ui-icon> | <ng-md-icon icon="face"></ng-md-icon>` in template and then pass it to my function but it isn't rendered too.

I've also tried `<i class="material-icons">face</i>` [syntax](https://www.reddit.com/r/Angular2/comments/626kj5/i_classmaterialiconsiconi_dynamic_icon/) similar to FontAwesome but it doesn't work either.

Any hints?  
Just want to add icon in ui\_template via JS - simplified version: `$('.md-toolbar-tools').append('<my icon here>');`

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [31 December 2018 12:35 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/3 "2018-12-31T12:35:00Z")

</div>

Hm, I've managed to display proper icon using `material-icons` class but I had to add `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">` to the template. I was under the impression that this font was already loaded in Dashboard as we can use it in several places so I'm confused a bit.

I'll leave it for now as it's working but would be glad to get some info why I had to manually import that font again.  
Thanks

[edited]  
Well, not yet solved.. `face` icon is displayed correctly however `battery_charging_50` renders as 456x24px wide empty block, so only some icons are available? And not the ones I need.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [1 January 2019 19:04 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/4 "2019-01-01T19:04:25Z")

</div>

you can stack and rotate fa-icons eg

```auto
<script>
    $('.md-toolbar-tools').append('<span class="fa-stack"><i class="fa fa-battery-half fa-rotate-270 fa-stack-1x"></i><font color="#29e017"><i class="fa fa-bolt fa-stack-1x"></i></font></span>');
</script>

```

gives ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dccc7e65f8633d72cfc091fde1fb0e24187f44e8.png)

---

<div class="post-metadata">

**Author:** ![Marooned](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marooned/32/2858_2.png) [@Marooned](https://discourse.nodered.org/u/Marooned)\
**Post date:** [2 January 2019 09:22 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/5 "2019-01-02T09:22:36Z")

</div>

Yes, that's true.  
So I understand there is no (simple) way of using material icons there?  
Generally I always avoided any Material related UI stuff, not my taste. Looks like another reason to still do it 😉

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [2 January 2019 09:26 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/6 "2019-01-02T09:26:29Z")

</div>

I will look for an easier way - but yes - the fa- way does seem to be simpler. The Material icons are there - via - [https://github.com/klarsys/angular-material-icons](https://github.com/klarsys/angular-material-icons) - but don't seem to be available in the template, and adding them again seems dumb.

---

<div class="post-metadata">

**Author:** ![Tobi](https://avatars.discourse-cdn.com/v4/letter/t/b9e5f3/32.png) [@Tobi](https://discourse.nodered.org/u/Tobi)\
**Post date:** [3 January 2019 07:05 UTC](https://discourse.nodered.org/t/add-icon-to-dashboard-topbar/6210/7 "2019-01-03T07:05:38Z")

</div>

Hi, is there a way to integrate a button into the topbar? For example, to get back to my homescreen. If so, how would I recognize the status of the button?