Acumatica. How we can add our own icons to the Modern UI?

1
votes

How we can add our own icons (like this https://snag.gy/lEh0NT.jpg) to the Modern UI through customization project? So we have .svg files and we need that in the Modern UI we can use this icons like others. Thanks

1
acumaticaacumatica-kb

1 Answers

3
votes

For the workspaces and tiles in the modern UI, Acumatica ERP uses the icons from the font based on Font Awesome. Starting from Acumatica ERP 2017 R2 Update 5 (17.205.0015), you can create custom icons as SVG files and use them for the workspaces and tiles along with or instead of the default icons, as described in this topic.

To Add an SVG Icon for a Workspace or Tile

  1. Create an SVG file with the icon. The following code shows an example of an SVG file. 

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z"/>      
</svg>

  2. In the file, surround each <path> tag with the <symbol> tag with the values of the following attributes specified:

    • id: Specifies the ID of the icon. The system finds the icon to render it by this ID. The value of the attribute is also used by the system to create the icon name displayed in the modern UI (when you select the icon for a new workspace or a new tile in Menu Editing mode of the modern UI). The system replaces underscores in the value of id with spaces to create the icon name for the UI.

      Note

      You can include multiple <symbol> tags with different values of the id attribute in one SVG file. For example, you can place multiple icons in one SVG file if all these icons are supposed to be used for the tiles of one workspace. This will speed up the rendering of the workspace.

    • viewBox: Defines the coordinates for the icon. The viewBox must be square (such as viewBox="0 0 24 24"). You can cut the viewBox attribute from the <svg> tag and paste it to the <symbol> tag. If you have multiple icons in one file, make sure you have the correct values specified for each icon.

    The following code shows an example of an SVG file with the necessary changes made.

    <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="my_icon" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z"/>
  </symbol>
</svg>
    Note

    You do not need to use any other tags (such as the <use> or <style> tag) in the <svg> tag. The icons are referenced and filled in with the colors of Acumatica ERP automatically.

  3. Place the SVG file in the Content/svg_icons subfolder of the site folder.
    You can now use this icon in the application in the same way as you use the default icons. For example, you can select this icon for a new workspace or tile in Menu Editing mode of the modern UI.

To Replace the Default Icon with an SVG icon

To replace the default icon with an SVG icon, follow the instructions above, and as the value of the id attribute of the <symbol> tag, use the name of the default icon that you want to replace. For example, if you want to replace the icon for the Finance workspace, use id="balance-scale".

Note

You can find the name of the needed default icon in the MUIWorkspace table of the application database by the name of the workspace: The Title column contains the name of the workspace; the Icon column contains the name of the icon.

During the rendering of the modern UI, the browser will use the icon from SVG instead of the corresponding default icon.