Question: How to implement link with an icon

[DenisDuev]

OpenUI5 version:

Hi team, how I can implement a link with an icon as it is specified in the Fiori Guidelines: https://experience.sap.com/fiori-design-web/link/#link-with-icon

Like this one:

What is the expected result?

The use case is having an icon in the link that point it is "External" link - will lead the user outside of the system

What happens instead?

I cannot implement the wanted behaviour even though it is described in the Fiori Guidelines

[petyabegovska]

Hi Denis,

The sap.m.Link control doesn't support an Icon yet, so you could use them only separately. It will not have the same effect however, for example the click will not be on the whole area, the underscore on hover will not be on both.

There are some discussions with VD design but it's not planned yet.

Best regards, Petya

[aborjinik]

@DenisDuev maybe you can consider to handle this with CSS.

Basically you can set your icon via custom data and let this to be written to the html. Afterwards a ::before pseudo element can be used to use this custom data attribute and the SAP icon font. RTL needs to taken into account as well.

Please see https://jsbin.com/fesilutuja/1/edit?html,output

[aborjinik]

Ah forgot to mention that you can find the icon symbols from the Icon Explorer application. e.g. https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons/?tab=grid&icon=world

PS: in the sample above I was trying to put the icon on the left as mentioned at the fiori guideline.

[boghyon]

Same request from https://answers.sap.com/questions/13834072/link-with-icon.html

[georgimkv]

Hello @DenisDuev Thank you for sharing your enhancement proposal. I found an internal feature request already created about this under the id FIORITECHP1-26791. The status of the enhancement will also be updated here in GitHub. Regards, Georgi