Dashboard-2 use local stored icon

Dashboard
,
6

Don't know if this helps, but I wanted to use a svg file stored locally in a button node, and this worked for me;

Loaded the locally stored icon using a template node set to css (Single Page) with the following -

.my_icon{
    --icon_src: url("/static/button/my_icon.svg");
    --button_background:#f4900c;
}

Then in the button node, or whatever node that you are using, access the CSS to display the icon.

EDIT - Amended flow attached below;

[{"id":"8fb5da02a6d1981d","type":"ui-button","z":"be4568a984cb4685","group":"48fc19d1161f11e6","name":"","label":"My Icon button","order":3,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"icon_button my_icon","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":340,"y":1840,"wires":[[]]},{"id":"fa864cf3c7b14005","type":"ui-template","z":"be4568a984cb4685","group":"","page":"19eb6d108e9275e2","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"/*for all icons define icon url and matching button \nbackground color as css variables.*/\n.my_icon{\n    --icon_src: url(\"/static/button/my_icon.svg\");\n    --button_background:#f4900c;\n}\n\n\n/*change the color of the button to match color of icon. optional*/\n.icon_button button{\n    background-color: var(--button_background);\n}\n/*make the text to support multiline, change the layout to grid with 2 columns*/\n.icon_button .v-btn__content{    \n    white-space: normal;\n    text-wrap:pretty;\n    width:100%;\n    gap:0.25em;\n    display: grid;\n    grid-template-columns: calc(var(--v-btn-height)) 1fr;\n}\n/*add the icon to the button using pseudoelement :: before*/\n.icon_button .v-btn__content::before{\n    content:\"\";\n    background-image: var(--icon_src);\n    min-height:calc(var(--v-btn-height));\n    min-width:calc(var(--v-btn-height));\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":330,"y":1800,"wires":[[]]},{"id":"48fc19d1161f11e6","type":"ui-group","name":"Test","page":"19eb6d108e9275e2","width":"20","height":"13","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"notebook","theme":"a965ccfef139317a","order":3,"className":"","visible":"true","disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"temporary"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
2 Likes