google material icons not loaded correctly

[Bond246]

Hello,

i generated a new "kitchen"-tab in my dashboard and searched for a suitable icon which i found in the google material pack. I tooked "mi-soup_kitchen" that looks like a ladle: https://fonts.google.com/icons?selected=Material+Icons+Outlined:assignment_returned&icon.query=soup_kitchen

1st problem is the dashboard just loads the icon of a fridge not the ladle. 2nd problem is that the left margin of the icon gets really wide. I briefly checked that with firefox dev-tools and it looks like that the space comes from the word "soup_kitchen".

If i use the google icon for other dashboards elements, not for tabs the space-problems seems to be the same.

Please tell us about your environment:

• [ ] Node-RED-Dashboard version: 3.1.1
• [ ] Node-RED version: 2.1.3
• [ ] node.js version: latest docker-version
• [ ] npm version: latest docker-version
• [ ] Platform/OS: linux/docker
• [ ] Browser: Firefox/Desktop, Chrome/Android

[dceejay]

Hmm - works for me

[Bond246]

Thanks for testing!

hmm... any idea how to get closer to the problem?

[dceejay]

maybe share a small part of your flow that shows the problem ?

[Bond246]

[{"id":"bf9d665380e6fd07","type":"ui_text","z":"8ae6f2d337b2f477","group":"989324d0e799fc86","order":3,"width":3,"height":1,"name":"","label":"Präsenz:","format":"{{msg.payload}}","layout":"row-left","className":"","x":460,"y":200,"wires":[]},{"id":"9be05f1947325bb1","type":"ui_text","z":"8ae6f2d337b2f477","group":"989324d0e799fc86","order":4,"width":3,"height":1,"name":"","label":"Lum.:","format":"{{msg.payload.lux}}lux","layout":"row-right","className":"","x":450,"y":240,"wires":[]},{"id":"989324d0e799fc86","type":"ui_group","name":"Schalter","tab":"679850fbcb7b789c","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"679850fbcb7b789c","type":"ui_tab","name":"Küche","icon":"mi-soup_kitchen","order":4,"disabled":false,"hidden":false}]

i havn't done some magic...

[dceejay]

indeed - still ok here Not sure what to suggest apart from restart server and making sure browser cache clear - and that internet connection is working. - Is there anything in the browser debug console ?

[Bond246]

Today i tested the above code-snipped on a completely different installation. Different network conditions, different geo-location. That install is still on NR v2.0.5 and dashboard 3.0.4.

Same problem.

Output on the browser debug-log:

You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material! app.min.js:150:202

Rendered http://ubuntu-home:1880/ui/css/app.min.less successfully. app.min.js:530:142657

CSS for http://ubuntu-home:1880/ui/css/app.min.less generated in 110ms app.min.js:530:142657

Less has finished. CSS generated in 110ms app.min.js:530:142657

SideNav 'left' is not available! Did you use md-component-id='left'? app.min.js:150:202

SideNav 'left' is not available! Did you use md-component-id='left'? app.min.js:150:202

Rendered http://ubuntu-home:1880/ui/css/app.min.less successfully. app.min.js:530:142657

CSS for http://ubuntu-home:1880/ui/css/app.min.less generated in 33ms app.min.js:530:142657

Less has finished. CSS generated in 33ms app.min.js:530:142657

Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://ubuntu-home:1880/ui/js/app.min.js
Source-Map-Adresse: angular-chart.min.js.map

Error: Promised response from onMessage listener went out of scope