Change Icon in JSON code - SharePoint

Martin, Heidi (SE GP T SP PS) 426 Reputation points
2024-06-10T12:06:53.4666667+00:00

Hello, How can I insert the icon “ShoppingCartSolid” instead of “Email” in this json code so that it looks like the example in the attachment!
User's image

Here is my JSON-Code:
User's image

The icon should also look like the one attached. Thank you so much!

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,072 questions
{count} votes

Accepted answer
  1. Yanli Jiang - MSFT 23,036 Reputation points Microsoft Vendor
    2024-06-12T08:18:46.9166667+00:00

    Hi @Martin, Heidi (SE GP T SP PS) ,

    For changing the icon, you just need to change “iconName”: “Mail” to “iconName”: “ShoppingCartSolid” and you will have the following effect:

    User's image

    Update On 6/13:

    If you want to realize it in gallery view, you need to use view formatting. view formatting has more design factors than column formatting, you can adjust it according to your needs, as for displaying ShoppingCartSolid icon, please try this:

    {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "height": "250",
    "width": "350",
    "hideSelection": true,
    "formatter": {
    "elmType": "div",
    "style": {
    "display": "flex",
    "align-items": "stretch",
    "margin-bottom": "100px",
    "min-width": "300px",
    "flex-grow": "1",
    "justify-content": "space-around",
    "padding": "5px"
     },
    "children": [
     {
    "elmType": "div",
    "style": {
    "width": "95%",
    "height": "92%",
    "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
    "overflow": "hidden",
    "border-radius": "2px",
    "padding-left": "16px",
    "padding-top": "16px"
     },
    "attributes": {
    "class": "ms-bgColor-neutralLighterAlt"
     },
    "children": [
     {
    "elmType": "div",
    "style": {
    "text-align": "left"
     },
    "children": [
     {
    "elmType": "div",
    "style": {
    "color": "black",
    "font-size": "16px",
    "font-weight": "600",
    "margin-bottom": "5px"
     },
    "txtContent": "[$Title]"
     },
     {
    "elmType": "a",
    "attributes": {
    "iconName": "ShoppingCartSolid",
    "class": "sp-field-quickActions",
    "href": {
    "operator": "+",
    "operands": [
    "mailto:",
    "[$Emailto]",
    "?cc=max.mustermann@xxx.com",
    "[$CC]",
    "&subject=",
    "[$Title]",
    "&body=",
    "Hello,"
     ]
     }
     }
     }
     ]
     }
     ]
     }
     ]
     }
    }
    

    And the result just likes this:

    User's image

    Hope this is help.


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in [our documentation] to enable e-mail notifications if you want to receive the related email notification for this thread.

    2 people found this answer helpful.
    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. Martin, Heidi (SE GP T SP PS) 426 Reputation points
    2024-06-12T08:33:18.8+00:00

    Hello @Yanli Jiang - MSFT ,

    Thank you - I will change the icon.

    But I have this open question:
    Is it possible to display the "Mail Link - ShoppingCartSolid" in the gallery view and allow users to click on it to open the corresponding email?

    User's image


  2. Martin, Heidi (SE GP T SP PS) 426 Reputation points
    2024-06-14T05:05:23.7+00:00

    Hi @Yanli Jiang - MSFT .

    I have another question, can I change the color of the 'ShoppingCartSolid' icon to a different color - here is the color code: #8a00e5. I tried, but unfortunately, I couldn't do it. Thank you!