When you are creating a new button and assign an icon to it, there is no way for you to know exactly what does this “add” icon look like.

Even if you use the star symbol in launchpad designer, there is still no convenient way to find this add icon.

Since all icons are listed in F4 help, there is no filter there:

Instead we can use this useful tool to find the icon you need efficiently:

SAP UI5 图标查看器
Currently there are 535 icons available.

We can easily find the icon we need by search button.

And in the right-bottom part of the page, there is an id “e000” displayed for icon “accidental-leave”. We will explain the meaning of this id in the end part of this blog.

How is icon rendered in Fiori

Originally I thought that the binary content of all icons are stored in the server side. And in the runtime when an icon is to be rendered, there is a conversion done, transferring the internal url like “sap-icon://XXX” to absolute path like “https://XXXX” which points to the icon stored in the server. However I am wrong.

         Figure: how the traditional image is displayed in Fiori

If you use the element inspection function in Chrome development tool, you will find the corresponding html element for image in the final html source code does not contain any attribute like src. Instead, it has an attribute defined by SAP which seems to have something to do with image content: data-sap-ui-icon-content.

The value of this attribute is filled by IconRenderer when the icon is to be displayed in UI. The variable oIconInfo.content stores the actual value.

Check the source code of this js file, where all the supported icons together with their icon name and icon code are hard coded.

So the icon id for icon “accidental-leave” we find in icon browser page, e000, is just its corresponding code hard coded in IconPool.js.

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

SAP Fiori图标(icon)设计原理：一个可以查看 SAP UI5 所有可用图标的工具相关推荐

关于SAP Fiori用户管理资料的一个问题
一个朋友私信我: 汪大师,请教个问题哈,你那边有没有SAP fiori 用户管理方面的资料哈,多谢多谢! 我的回答: 没有哈,Fiori是基于SAP UI5这个技术框架开发而成的web应用的UX风格, ...
SAP ABAP报表依赖设计原理详解
In SAP note 1230076 "Generation of ABAP loads: Tips for the analysis", a tool report RSDEP ...
debug the very first SAP Fiori application -Jerry的第一个SAP ui5应用调试经过
Created by Wang, Jerry, last modified on Jan 15, 2015 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
SAP Fiori 应用里图标(Icon)的渲染原理和使用技巧
这是 Jerry 2021 年的第 27 篇文章,也是汪子熙公众号总共第 298 篇原创文章. 近日,一位 SAP 合作伙伴的开发人员,向我咨询一个关于 SAP Fiori 应用里图标的使用问题. 这 ...
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章. Jerry 前一篇文章深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fio ...
深入理解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 应用添加自定义按钮
这是 Jerry 2021 年的第 33 篇文章,也是汪子熙公众号总共第 309 篇原创文章. Jerry 的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流 ...
本地开发好的 SAP Fiori Elements 应用，如何部署到 ABAP 服务器上？
这是 Jerry 2021 年的第 29 篇文章,也是汪子熙公众号总共第 300 篇原创文章. 之前 Jerry 的两篇文章,分别介绍了如何在本地使用 Visual Studio Code 创建一个 ...
SAP Fiori学习笔记
资料链接:有些是需要自带梯子的哦- Fiori Design Guidelinesexperience.sap.com戴团长:SAP Fiori Designzhuanlan.zhihu.com如 ...
SAP Fiori 页面的周期性动态刷新功能的实现步骤
一个朋友向我咨询,关于 SAP Fiori 页面自动刷新的实现方法. 如果是 Jerry 之前视频一步步创建 SAP Fiori Elements 应用介绍的 SAP Fiori Elements ...

SAP Fiori图标(icon)设计原理：一个可以查看 SAP UI5 所有可用图标的工具

How is icon rendered in Fiori

SAP Fiori图标(icon)设计原理：一个可以查看 SAP UI5 所有可用图标的工具相关推荐

最新文章

热门文章