How do we attach built-in or custom Icons to Frappe Framework 13 modules/items?

Frappe Framework
1

There’s not a lot of documentation on this, and I have been trying to get the icons to work through the desktop.py configuration links here:

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from frappe import _

def get_data():
        return [
                {
                        "module_name": "Library Management",
                        "color": "grey",
                        "category": "modules",
                        "icon": "octicon octicon-comment-discussion",
                        "type": "module",
                        "label": _("Library Management")
                }
        ]

but to no avail. I have also tried to create various types of entries in the “Desktop Icon” doctype, accessed from “Customization” → “Doctypes” but in the absence of any documentation referring to this i have had no success. Has anyone seen this working in version 13?

2
3

Hi Kenneth,

Thanks for the info, but how do we actually display an icon in the cards or module headers? It’s this bit that is an issue

4

There are no icons in the v13 desk design as of now.

5

I would like to have the icons displayed in sidebar and widgets. Is there any way to enable them now? I notice the icons are defined in code already, but they are not displayed. The settings module shows icons in v13. None of the other modules do. Any help would be appreciated.

6

Icons are added in the new UI that’s been worked on. You can check the rebrand-ui branch for both Frappe and ERPNext. Though at this point I’m not sure what icons are supported. They’re being added via the Desk Page.

image
image1401×775 58.7 KB

7

Thank you for the response. I will check the rebrand-ui branch. In the meantime, to load icons for the sidebar, I had added a custom JS file in my custom app and got it to work. The file consists of a JSON object that matches the item names in sidebar to icons that I randomly selected. Then I change the HTML of the sidebar on windows load to include icon before the name for each item. It is just a quick fix code and buggy at this stage. It also renders the icons with a delay as it is executed after the page is loaded.

8

I am still trying to wrap my head around the Frappe and ERPNext framework so I need some pointers. I noticed the desktop.js has been moved to workspace.js, and within this file, I found the code where the HTML for sidebar item is defined with icon. I had tried a similar approach earlier by modifying desktop.js directly but the changes did not reflect. Now I have three questions:

  1. What should I do to ensure any changes made to Frappe or ERPNext code directly are reflected? Should I run a bench command to rebuild everything? If yes, which command? I don’t want to pull changes from the ERPNext or Frappe code on GitHub in the process.
  2. Since changing files directly is not recommended, is there a way to achieve this via custom app?
  3. The workspace.js file has the following code for rendering icons. What I don’t understand is, where is the “item” object read from and where are the icons defined?
    <div> ${frappe.utils.icon(item.icon || "folder-normal", "md")} </div>
    <div> ${item.label || item.name} </div>

Any help would be appreciated.

1 Like
9

Icons are hard coded inside symbol-defs.svg file. You can add any svg path with

<svg> <symbol viewBox="0 0 x y"  xmlns="http://www.w3.org/2000/svg" id="icon-name"><path></path> </symbol>   </svg> parent tags.

Run bench build and clear-cache commands. Hard Refresh your browser.

Assign the new icon to a module using Customise Workbench feature.

Hope this helps someone.