SAPUI5 icon set

[#1]

Hi,

I noticed SAP UI5 has a really nice extensive icon set:

https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/m/demokit/icon-explorer/index.html#pag...

I was just wondering if anyone knows if it is available to download and what the licence restrictions would be in using some of these icons in a native app which integrates with SAP.

Thanks,

Brad

[GrahamRobbo · Accepted solution]

Hi Brad,

the icons are implemented using an embedded font rather than images so you can't easily download and use them in isolation.

But my understanding is that you can download the SAPUI5 library and use it as long as it is for SAP applications. I believe the use of the SAPUI5 library in these cases is already covered by your existing user licenses. If, on the other hand, you want to use it for non-SAP scenarios you will need to talk to your account manager.

Cheers

Graham Robbo

[bradp · Accepted solution]

Hi Graham,

Thanks for your response.

I had a feeling they weren't easily accessible, thanks for confirming that.

I do want to use them for SAP applications, however in native apps, not Hybrid/HTML5.

I will have to contact SAP and see if that's allowed.

Cheers

Brad

[AndreasKunz · Accepted solution]

Hi Bradley,

as Graham wrote: the icons are implemented as characters of a special font. This is an advanced way of providing icons in the web which has advantages that are (partly) especially important on mobile devices:

• Only one server request even for a big number of icons (and no need to apply the spriting technique, which would also solve this for normal images but brings some difficulties)
• Resolution-independence and ability to scale without loss of quality: with retina displays and even other pixel densities than 1 and 2 (e.g. 1.5 on some devices) it is getting more and more difficult to provide sharp/crisp images on mobile displays by using bitmap graphics. Vector graphics as used by fonts are much better suited to be displayed on different pixel densities and in different sizes.
• Easy color adaptation using CSS: font characters can be colored by just applying a CSS text color, so theming and different colors in different parts of the UI become very simple.
• Effects like shadows and outlines around the icon shape can also be applied easily using CSS features.

Of course this makes it more difficult to e.g. replace or extract single icons. That's the downside. But technically you should also be able to use custom fontrs in native applications. I can't comment on the legal side of it, though.

Regards

Andreas

[bradp · Accepted solution]

Thanks Andreas, interesting info.

[Former Member]

Hi Graham,

my code looks like:

var aTile = new sap.m.StandardTile("account", {

                              icon : sap.ui.core.IconPool.getIconURI("account"),

                              number : "28",

                              title : "Meine Kunden",

                              press : function() {oEventBus.publish("nav", "to", {

                                                                                id : "CustomerList" })}

                    });

                    tiles.push(aTile);

So how can I define the size and color the icon in this context?
Jens

[GrahamRobbo]

In that case you will have to manipulate the styles. You could use a stylesheet or do it in JQuery.

Something like...

$('#account-img').css('color','red');

$('#account-img').css('font-size','60px');

Cheers

Graham Robbo

[AndreasKunz]

...probably better stylesheet than jQuery because you don't have to think about the right point in time and possible rerenderings.

And because it separates style and functionality.

Andreas

[Former Member]

Hi Graham,

thanks for your help.

I am new to this. How can I add your code to mine?

var aTile = new sap.m.StandardTile("account", {

                              icon : sap.ui.core.IconPool.getIconURI("account"),

                              number : "28",

                              title : "Meine Kunden",

                              press : function() {oEventBus.publish("nav", "to", {

                                                                                id : "CustomerList" })}

                    });

                    tiles.push(aTile);

Thanks

Jens

[Former Member]

Hi,

how can I define, that I want to use the bigger, colored Icons instead of the black&white ones.

e.g. icon: sap.ui.core.IconPool.getIconURI("money-bills")  shows only the B&w icons...

Jens

[GrahamRobbo]

The icon control has both size and colour properties.

https://sapui5.netweaver.ondemand.com/sdk/docs/api/symbols/sap.ui.core.Icon.html