Custom SVG Icon for App

I am developing an app, but I can’t get my custom SVG icon to work. The standard octicon icons aren’t sufficient for my purposes. According to the documentation , I should be able to add my own svg file - and I have. The documentation, however, appears to be out of date (e.g. I’m not using a desktop/config.py file, it is config/desktop.py , and the document format is slightly different), so I’m can’t be sure of anything the document says.

Here’s my config/desktop.py :

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

def get_data():
      return [
          {
              "module_name": "dividers",
              "color": "grey",
              "icon": "assets/dividers/images/dividers-module.svg",
              "type": "module",
              "label": _("Dividers"),
          }
      ]       

Here’s the code it generates on the page (indented for readability):

<div data-v-42551af3="">
    <i
        data-v-42551af3=""
        class="assets/dividers/images/dividers-module.svg"
        style="color: rgb(141, 153, 166); font-size: 18px; margin-right: 6px;"
    ></i>
</div>

As you can see, ERPNext dumps my icon path into the class as if it was an icon rather than an svg image.

I have confirmed that the icon is accessible at the indicated path. What do I need to change to get ERPNext to display my icon?

note: I originally mistakenly posted this topic under “ERPNext customization” before I realized there was a category for developers. The original topic can be found here: Custom Module Icon - Incorrect HTML)

Try to create a class name in the CSS file and give it background as file URL

.iconName {
   background:url('assets/dividers/images/dividers-module.svg');
}



from __future__ import unicode_literals                                                                                                                                                                                                      from frappe import _

    def get_data():
          return [
              {
                  "module_name": "dividers",
                  "color": "grey",
                  "icon": "iconName",
                  "type": "module",
                  "label": _("Dividers"),
              }
          ]
1 Like

That’s an interesting workaround - thanks for the suggestion. Does that mean that the documentation is wrong - that SVG icons aren’t supported?

SVG supporting as image or class background in CSS style, but the “icon” attribute support any CSS class like font awesome icons like " fa fa-user " it will appear as user icon, or you can add custom class with custom background

https://fontawesome.com/v4.7.0/icons/