LookUp column with a custom icon using SharePoint list formatting

I recently got question from a follower on LinkedIn, which I thoght that the answer can be useful for more people:

I am struggling with formatting a SharePoint list lookup column. I want to make it show an icon but when I click it, it should open the lookup column value on that other list (normal lookup hyperlink behavior). I have achieved this before with text fields but never with Lookups. Any help would be appreciated!

How to use LookUp field values

If you want to use LookUp field values in SharePoint list formatting JSON, you need to access them as subproperties of the field:

@currentField.lookupValue

@currentField.lookupId

OR

$fieldInternalName.looupValue

$fieldInternalName.lookupId

Combining LookUp field values with a custom icon

As requested in the question above, you can also find the below example. In this example we generate a clickable link with an Icon, from a LookUp field that opens the list view form for the Source list.

The href…