How to select an icon for workspaces and apps?

Frappe Framework Customization
1

Hello gentlemen,

I’m wondering how to select an icon for a workspace or an app.
Using my google skills I found out that these icons are available: https://primer.style/octicons/
I thought the “container”-icon would be nice for testing-purposes.

I edited the entry “Utilities” in Workspace List to choose another icon:

image
image953×558 40.6 KB

Then I logged out and in to apply my changes, but the icon was not displayed:
image

How do I specify which icon to use? Could someone provide an example?

Furthermore you can specify an app_icon in hooks.py. The default is
app_icon = “octicon octicon-file-directory”

How would I change this entry to use the said “container”-icon?

2

Your Google skills have failed you. These v13 icons are custom made and found in the source code of frappe (a single file with some SVG definitions). The choice of icons is rather limited.

Basically you can check which items are already used in other workspaces and reuse them.

3

Thanks for the hint.Let me share my findings…

To get a list of the available icons do
grep "id=\"icon-" ~/frappe-bench/apps/frappe/frappe/public/icons/timeless/symbol-defs.svg

You get entries like this:

<symbol viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-star">
> 
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="icon-map">

To use an icon enter the icons id without the prefix “icon-”, e.g.

image
image775×374 17.2 KB

Then logout and login again to see the effect of your change.

1 Like
4

This said the original questions remain:

  • how does one add new icons to his own application?
  • what is app_icon in hooks.py good for and how do you specify it?
1 Like