How to Set user defined Icons in the Modren UI menu in Acumatica

Question

I wanted to have the custom Icon to my title.How can i add it and able to shown in the menu?

Answer 1

Step 1 : Draw the image (PNG format is recommended)
    For best visibility use a white background (#FFFFFF), and black for the lines
    Personally, for pixel art, I use a program called Paint.NET from getpaint.net
    I find it better than photoshop for pixel art.
    It is like MS Paint, except it allows transparent pixels, has several tools, and allows the right click and left click to be set to separate colors, which even Photoshop can't do (I've only used the Mac version)

Step 2 : Change the coloring
    Once the image is drawn, set the background to white (#FFFFFF), and the foreground to completely transparent
    In Paint.NET all you have to do is globally select the black using the magic wand, then press the delete key

Step 3 : Convert the PNG to an SVG
    This site has worked the best for me https://convertio.co/png-svg/
    There are other sites, but most of the time they'll give you a 1 kb file which is just an empty image

Step 4 : Fix the spacing. You'll thank me later.
    Preferably use NotePad++, since regular Notepad doesn't care about spacing
    NotePad++ understands tabbing and recognizes most languages including XML, which helps if you miss a closing tag

Step 5 : Add the required tags for Acumatica
    Inside the svg tag, add a symbol tag. Give it an id
    id="PX_IconName"
    Acumatica will translate underscores into spaces
    The id needs to be unique to the system, as does the file name, "PX" can be replaced with the 2 letter prefix assigned to your Project if Acumatica has given you one.
    Copy the viewBox attribute from the svg tag and paste it after the id in the symbol tag
    Inside the g tag, remove the fill attribute, and add a class attribute class="ac"
    Don't forget the </symbol> tag after the </g> tag

    You might want to set the stroke attribute of g to "round" if the image has curves, it might make a difference
    The file should look like this

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000" preserveAspectRatio="xMidYMid meet">
    <symbol id="PX_IconName" viewBox="0 0 400.000000 400.000000">
        <g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)" stroke="none">
            <path d="M1923 2950 c-12 -5 -26 -17 -31 -27 -14 -27 13 -1382 28 -1397 6 -6 45 -11 91 -11 110 0 109 -2 109 191 0 84 5 390 11 680 l10 527 -21 21 c-17 17 -35 21 -98 23 -42 2 -87 -1 -99 -7z"/>
            <path d="M1923 1325 c-44 -19 -56 -48 -56 -140 -1 -129 31 -165 145 -165 107 0 148 44 148 160 0 82 -20 127 -64 145 -44 19 -131 19 -173 0z"/>
        </g>
    </symbol>
</svg>

Step 6 : Add the svg file to the instance
    The svg file goes inside the \Content\svg_icons folder of the instance, then we include it into the package for distribution
    The name needs to be unique because the actual file will be copied into the instance folder, so any conflicts will result in overridden files

Notes :
    After a lot of trial and error, along with reading the HTML generated by Acumatica, I found that a white background image with a transparent foreground along with the class="ac" tag allows Acumatica to handle the coloring of the image.
    If you don't follow these steps, the image will always be black, or just invisible. Both of these outcomes look bad.
    Another thing to note is that Acumatica currently does not allow custom icons in Dashboard Widgets or on the Mobile SiteMap
    If you think these two features should be implemented, give the ideas a vote here :
    https://feedback.acumatica.com/ideas/ACU-I-1917
    https://feedback.acumatica.com/ideas/ACU-I-2029