cancel
Showing results for 
Search instead for 
Did you mean: 

Why are the sap-icons broken when I use a custom theme?

benjyt
Explorer
0 Kudos
I have a OpenUI5 project where I want to add a custom theme.

The theme is coming from a npm package, so I included it in package.json like this:

"dependencies": {
    "webui-theme-my_eservice": "^1.12.1"
}

Then I configured the build command from ui5-cli to also build this into the output:

ui5 build --dest=../../webapp --clean-dest --include-dependency=webui-theme-my_eservice

Finally, I apply my custom theme in index.html:

<script id="sap-ui-bootstrap"
    src="https://sdk.openui5.org/resources/sap-ui-core.js"
    data-sap-ui-theme="my_eservice"
    data-sap-ui-theme-roots='{
        "my_eservice" : "./resources"
    }'
    ...>

When I run the build output on a server, the color scheme and component styles of my custom theme are correctly applied. However, it seems that all references to UI5 Icons are broken:

<Button
    icon="sap-icon://visits" />

ends up displaying as

BROKEN_ICONS.png

All icons are displayed as outlined rectangles, and the network log in the developer tools shows errors like:

DEV_TOOLS.png

It appears that the fallback mechanism doesn't work, as the application only is looking for the icons in the custom theme. From my understanding, once a resource is not available in the custom theme, it should fallback to the default theme and pick up the resources from there.

When I switch to a default theme, all icons display as they should.
What do I need to get both my custom theme and the icons working?

Accepted Solutions (0)

Answers (0)