Change Icon in JSON code - SharePoint

Question

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!

Here is my JSON-Code:

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

Answer 1

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:

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=******@xxx.com",
"[$CC]",
"&subject=",
"[$Title]",
"&body=",
"Hello,"
 ]
 }
 }
 }
 ]
 }
 ]
 }
 ]
 }
}

And the result just likes this:

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.

Answer 2

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?

Answer 3

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!