In the Perspective module, I’ve dragged on an Icon component which has the path property, however it’s a simple text entry with no image browser, and I’m struggling to work out where this path should come from?
The icon component path is defined by SVG files located at {install_location}/data/modules/com.inductiveautomation.perspective/icons/
We currently ship with material.svg which contains all the svgs here https://material.io/tools/icons/?style=baseline
What’s nice is that if you copy the material.svg format, you may add your own collection of svgs by placing the file in the same directory as material.svg.
Then the path of the icon is {svg_file_name}/{icon} just like material/insert_emoticon
Alternatively, judging by your other thread, if you are just doing simple shapes you should be able to just save an svg to your desktop and drag and drop that svg right into the view you are using.
3 Likes
Thanks, sounds nice 
Will there eventually be a browser made for this to select the SVGs from?
1 Like
Yes, a browser for the SVGs is planned. Should make that component a lot easier to use in the future.
2 Likes
I can’t seem to get this icon path to work
I have the file saved in the right directory and I cannot get it to link to my menu icon path:
Try Hamburger/icon If that doesn’t work can you upload the image here so I can take a look. Chances are it doesn’t follow the exact format that the material icons library is set to.
This icon did not work with the syntax you suggested.
And, I found another one from this website you posted above:
I tried the same thing with this icon below that I selected off the website and found it to not work as well. I copy the icon into the directory, and type in list-24px/icon into the Handle Icon Box on the docked window config, but it doesn’t work.
Heres a new one that will work in Ignition with the path Hamburger/layer1
That said, there’s an existing icon that looks just like this in the material library that can used with the path material/menu
I have this problem all time, it looks like ignition doesn’t detect changes in a file for icon library. The solution that works for me is, for example, if you added a new icon to file ignition than save that file and do copy paste of ignition file, you will have new file ignition - Copy, then insert on view icon with location ignition - Copy/icon, save and reopen view. In the case of the season, you need to start a new one.
Any file changes in /data/modules/com.inductiveautomation.perspective/icons/ will require that the gateway is restarted before any of the changes are recognized. The only time that file is read is during startup when it hosts the images on the gateway.
1 Like
I have noticed that the material.svg file that ships with 8.0.13 is not up to date with https://material.io/resources/icons. Is there a more current file available?
4 Likes
I’ve found the same 
material/verified did not work
1 Like
I have same issue, i found new icons from Google Fonts but when I past the path to my designer, it doesn’t shows when I launch Perspective. Is there a way we need to update the data\modules\com.inductiveautomation.perspective\icons ?
Pick an icon from there and ill show you how to get it in a file that works.
Also, everyone should be aware that if you use many icons through a flex repeater for multiple instances. And you use the material file. Your page load times will take longer as it has to load x amount of copies of the entire file.
I figure out what I need for a view I’m going to be using in multiple instances. and just pluck the icons from the material file and then I make a new svg file named after the view and use that. Lot better to load 4 icons than several hundred.
Thank you, the one i am looking for is called:
logout
@qliu
So I downloaded the svg file.
Then I opened it with Inkscape which is an open-source SVG designer… Highlight everything on the pallet and go to path > union. You don’t always have to do this but with this icon, it had two paths and I’ve had more luck just combining multiple paths.
Then I save it as “plain Inkscape file”
Then go to that file and take out the path tag. In this case for path 48.
d="M 4 3 C 2.9 3 2 3.9 2 5 L 2 19 C 2 20.1 2.9 21 4 21 L 12 21 L 12 19 L 4 19 L 4 5 L 12 5 L 12 3 L 4 3 z M 17 7 L 15.589844 8.4101562 L 18.169922 11 L 8 11 L 8 13 L 18.169922 13 L 15.589844 15.580078 L 17 17 L 22 12 L 17 7 z " />
</svg>
From 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg50"
version="1.1"
fill="#000000"
width="24px"
viewBox="0 0 24 24"
height="24px">
<metadata
id="metadata56">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs54" />
<path
id="path46"
fill="none"
d="M0 0h24v24H0z" />
<path
id="path48"
d="M 4 3 C 2.9 3 2 3.9 2 5 L 2 19 C 2 20.1 2.9 21 4 21 L 12 21 L 12 19 L 4 19 L 4 5 L 12 5 L 12 3 L 4 3 z M 17 7 L 15.589844 8.4101562 L 18.169922 11 L 8 11 L 8 13 L 18.169922 13 L 15.589844 15.580078 L 17 17 L 22 12 L 17 7 z " />
</svg>
Then we have to make a file that ignition can render. So i take the material file. Delte the first like 7000 lines. All the way where there is only one other svg in there. Then I copy from the svg open and close tag and replace “id” with the name I want to call the icon with. In this case “logout”. Then save the file with the file name you want to call it with. I am going to call this file “logout.svg”. So in my icon component, i can use logout/logout. You can also just append this to the material file as well and then you’d call it like material/logout.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>.icon { display: none } .icon:target { display: inline }</style>
</defs>
<svg viewBox="0 0 24 24">
<g class="icon" id="3d_rotation">
<path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z" />
</g>
</svg>
<svg viewBox="0 0 24 24">
<g class="icon" id="logout">
<path d="M 4 3 C 2.9 3 2 3.9 2 5 L 2 19 C 2 20.1 2.9 21 4 21 L 12 21 L 12 19 L 4 19 L 4 5 L 12 5 L 12 3 L 4 3 z M 17 7 L 15.589844 8.4101562 L 18.169922 11 L 8 11 L 8 13 L 18.169922 13 L 15.589844 15.580078 L 17 17 L 22 12 L 17 7 z " />
</g>
</svg>
</svg>
Then use it. It might not show up in the designer. until you restart the designer or perspective or the gateway. If you make a new file it will. If you edit it an existing. Idk it’s flakey. When it will un-cache or whatever. For sure when you restart the perspective module.
2 Likes
Thank you so much! I really appreciate your time, I will try it for sure, thanks! 