Custom Icons in Perspective

Hi,
I’d like to use custom icons in Perspective.
Is there a way to either add custom icons to material icon library? or simply add custom icons somehow?
I’ve copied icons to the icons folders and tried to use them in the icon component, but it does not work.
Thanks!

This may help

Thanks Craig,
It seems an icon “library” needs to be created in order to make the icons available for Ignition, I haven’t found how to do that.
Regards!

You’ll just follow the format of an SVG icon sprite (the same format used by the Material icons) and place that SVG file in the location mentioned in the post that is linked above. Here is an example of the sprite format:

<?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="test">
            <path d="M7.52 21.48A10.487 10.487 0 0 1 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-.08a1.07 1.07 0 0 1-.4-.24.99.99 0 0 1-.26-.37c-.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-.56a1.67 1.67 0 0 0-.23-.51c-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31a2.098 2.098 0 0 0 .89-.75c.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96a1.78 1.78 0 0 0-.51-.69c-.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.49a.87.87 0 0 1-.25.37c-.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>

1 Like

Suddenly, perspectiv doesn’t detect any changes in the library for the icons. I have add new library, change old, change name of the icon in material library… restart PC… Can you help me?

It might be a cache issue. You can try deleting your icon repo from the install directory (INSTALL_DIRECTORY\src\main\home\data\modules\com.inductiveautomation.perspective\icons\YOUR_REPO.SVG) and relaunching the gateway. Create a backup of your repo before deleting just in case this doesn’t do the trick.

Joshua, thank you for your answer.

Yes, I am doing that, but that is really annoying. I have to delete “YOUR_REPO.SVG” or to copy file with icons and paste it in icon folder (for example I have file XXXXX.svg my library with icons, after copy/paste I have file XXXXX_Copy.svg) , after that I have to save project and reopen view. And in designer I can see icons only from copied file.