使用自定义主题时SAP Icons显示异常的问题求助

问题根源 #

自定义主题包未包含UI5图标字体资源，且当前主题根路径配置未开启资源 fallback 机制，导致UI5仅在自定义主题目录查找图标，找不到时无法回退到默认主题的图标资源。

解决方案 #

1. 开启主题资源Fallback并配置默认主题路径 #

修改index.html中的bootstrap配置，添加data-sap-ui-theme-fallback="true"参数，并指定默认主题（如sap_belize）的资源路径，让UI5在自定义主题缺失资源时自动回退：

<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",
        "sap_belize": "https://sdk.openui5.org/resources/sap/ui/core/themes/sap_belize/"
    }'
    data-sap-ui-theme-fallback="true"
    ...>

2. 检查自定义主题包的图标资源（可选） #

如果不想依赖CDN的默认主题资源，检查webui-theme-my_eservice包内是否包含sap/ui/core/themes/my_eservice/fonts/目录及SAP-icons.woff2等字体文件。如果缺失：

• 联系主题包提供者补充图标资源；
• 或者手动将默认主题的字体文件复制到自定义主题的对应目录下。

3. 本地打包默认主题资源（可选） #

若要完全离线使用，修改UI5构建命令，同时包含默认主题的依赖：

ui5 build --dest=../../webapp --clean-dest --include-dependency=webui-theme-my_eservice --include-dependency=sap.ui.core.themes.sap_belize

然后调整data-sap-ui-theme-roots指向本地默认主题路径：

data-sap-ui-theme-roots='{
    "my_eservice": "./resources",
    "sap_belize": "./resources/sap/ui/core/themes/sap_belize/"
}'

4. 验证效果 #

运行构建产物后，查看开发者工具的网络请求，确认图标字体文件能正常加载（要么来自自定义主题目录，要么来自默认主题的fallback路径），此时UI5 Icons应正常显示。

内容的提问来源于stack exchange，提问作者BenjyTec