Add icon to Dashboard topbar

Dashboard
1

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?

2

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 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>');

3

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.

4

you can stack and rotate fa-icons eg

<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

5

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 :wink:

6

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 - but don't seem to be available in the template, and adding them again seems dumb.

7

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?