Custom Icons in Perspective

Ignition
1

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!

2

This may help

3

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!

4

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
5

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?

6

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.

7

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.

8

I’ve spent an entire day trying to import a custom file with SVGs (actually, Google’s Icon library). I put the file in the exact same format as material.svg, named it google_icons.svg, but no matter what I do, I can’t get the designer to display my icons.

Here is what the file looks like:

<?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="M256 512c134 0 244 -103 255 -234h-32c-7 80 -57 147 -127 180l-29 -28l-81 81zM353 260c0 34.9356 -13.6691 57 -47 57h-20v-123h19c25.6434 0 40.2719 13.9518 46 34c2 7 2 15 2 24v8zM306 341c38.1819 0 60.9327 -19.3318 72 -47c4 -10 5 -22 5 -34v-8 c0 -26.4057 -7.57104 -45.571 -21 -59c-13.4122 -13.4122 -30.5519 -22 -57 -22h-49v170h50zM207 258c15.3033 -6.12131 28 -18.2465 28 -39c0 -8 -2 -14 -5 -20s-6 -12 -11 -16c-9.37815 -7.50252 -23.5479 -12 -40 -12c-31.0959 0 -54 15.7441 -54 47h27 c0 -15.4518 11.6022 -25 27 -25c17.8699 0 28 8.53939 28 27c0 18.8434 -12.3951 27 -31 27h-16v22h16c17.3039 0 29 8.03066 29 25c0 16.5246 -8.84017 25 -26 25c-14.4441 0 -25 -8.58131 -25 -23h-28c0 14.8936 7.55163 24.5516 15 32c9.92709 7.94167 20.8987 13 38 13 c25.6475 0 40.3859 -9.7718 49 -27c3 -6 4 -12 4 -20c0 -18.1878 -12.3353 -29.6677 -25 -36zM160 54l29 28l81 -81l-14 -1c-134 0 -244 104 -255 235h32c8 -80 57 -148 127 -181z"/>
        </g>
    </svg> 
    <svg viewBox="0 0 24 24">
        <g class="icon" id="ac_unit">
            <path d="M469 277v-42h-89l69 -69l-30 -31l-99 100h-43v-43l100 -99l-31 -30l-69 69v-89h-42v89l-69 -69l-31 30l100 99v43h-43l-99 -100l-30 31l69 69h-89v42h89l-69 69l30 31l99 -100h43v43l-100 99l31 30l69 -69v89h42v-89l69 69l31 -30l-100 -99v-43h43l99 100l30 -31l-69 -69 h89z"/>
        </g>
    </svg> 
    ...
</svg>

What could be the problem here? I tried cutting it from the icons directory, restarting Gateway service, pasting it back in there, and again restarting the Gateway, but nothing worked. I also rebooted the machine. I renamed the file to custom_icons.svg instead of google_icons.svg and restarted the service, but still nothing.

9

I think your icon viewBox attributes are your problem. The svgs are likely being drawn, but based on those path points are well outside of the 24x24 box you can see that starts at 0x and 0y of the icon svg canvas.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Edit: Sorry, just realized I didn’t give you a direct solution on how to fix your problem. I would probably play with the viewBox attribute for both and see how they display in the designer after making changes. Maybe start by greatly expanding the width and height numbers to see where the icon is being drawn. Something like “0 0 500 500” and adjust from there. Unless you have the original SVG file you got the path values from which may have a viewBox you can copy.

1 Like
10

Sweet, that was it!!! Thank you

11

I was following the setp from
https://docs.inductiveautomation.com/display/DOC80/Images%2C+SVGs%2C+and+Icons+in+Perspective

but it was not working.

Instead of restarting the gateway, I tried restarting the module Symboly Factory and it work.