JSON Attribute iconName Creates Pseudo class of CSS (::before) which Repeats the Icon

SharePoint List form, JSON added in Header:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "attributes": {
        "class": "ReactClientFormFields"
    },
	"style": {
		"display": "block"
	},
    "children": [
		{
			"elmType": "div",
			"attributes": {
				"class": "ms-borderColor-neutralTertiary sp-css-backgroundColor-warningBackground50 ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-18"
			},
			"style": {
				"background-color": "#e8e8e880",
				"border-top-width": "0px",
				"border-bottom-width": "1px",
				"border-left-width": "0px",
				"border-right-width": "0px",
				"border-style": "solid",
				"box-sizing": "border-box",
				"width": "100%",
				"overflow": "hidden",
				"color": "#f7a020"
			},
			"children": [
				{
					"elmType": "span",
					"txtContent": "Outgoing",
					"style": {
						"width": "100%"
					}
				}
			]
		},
        {
            "elmType": "div",
            "attributes": {
                "class": "ReactFieldEditor"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ReactFieldEditor-titleContainer"
                    },
                    "children": [
                        {
                            "elmType": "span",
                            "attributes": {
								"iconName":"Calendar"
								"aria-hidden":"true",
                                "class": "ms-Icon ReactFieldEditor-titleIcon root-143"
                            },
                            "txtContent": ""
                        },
                        {
                            "elmType": "span",
                            "attributes": {
                                "class": "fui-Label ms-Label ReactFieldEditor-fieldTitle ___1mnryf3 fk6fouc f19n0e5 fkhj508 fytdu2e fl43uef ftgm304 f1sbtcvk fifp7yv fdghr9 f1asdtw4"
                            },
                            "txtContent": "Date"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ReactFieldEditor-core--display",
                        "role": "button"
                    },
                    "children": [
                        {
                            "elmType": "div",
                            "attributes": {
                                "class": "od-FieldRenderer-text fieldText_dc7ba0fe"
                            },
                            "txtContent":
							"=if(Number([$Date]) == 0,'',toLocaleDateString([$Date]))"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ReactFieldEditor-state"
                    }
                }
            ]
        }
		]
		}

Creates double icon by automatically adding Pseudo class (.CSS-333::before) and content:

When checked in debugger:

Can I set content for this particular class in "style" via JSON? How I can avoid server from putting the pseudo class with content?

HELP!! HELP!!
ChristinaLiang konger HridayDutta Mindy_Rosenthal Julian_Sharp Luxmi_Nagaraj LocP840 SergeiBaklan MarisaMathews JessieHwang traceycarisch micheleariis justinroyal NikolinoDE RedWindow AnavSilverman

renatocamara
Oct 23, 2024
amke321
To resolve the issue of the ::before pseudo-class automatically being added by the server in SharePoint, you cannot directly control or remove the ::before pseudo-element via JSON formatting.

However, you can override its behavior by:
1. Using Custom CSS: Apply custom CSS that overrides the ::before content:
.css-333::before {
content: none !important;
}

2. Inject Custom CSS: You can inject the CSS using a SharePoint Framework (SPFx) extension or a modern script editor web part.

This method prevents the duplicate icon rendering while keeping the iconName behavior intact.

3 Replies

renatocamara

Microsoft

Oct 23, 2024

amke321
To resolve the issue of the ::before pseudo-class automatically being added by the server in SharePoint, you cannot directly control or remove the ::before pseudo-element via JSON formatting.

However, you can override its behavior by:
1. Using Custom CSS: Apply custom CSS that overrides the ::before content:
.css-333::before {
content: none !important;
}

2. Inject Custom CSS: You can inject the CSS using a SharePoint Framework (SPFx) extension or a modern script editor web part.

This method prevents the duplicate icon rendering while keeping the iconName behavior intact.

amke321

Copper Contributor

Oct 28, 2024

renatocamara Custom CSS will not work with JSON as we cannot provide style for a css class within JSON code.

.css-333::before {
content: none !important;
}

It cannot fit in Json provided:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "attributes": {
        "class": "ReactClientFormFields"
    },
	"style": {
		"display": "block"
	},
    "children": [
		{
            "elmType": "div",
            "attributes": {
                "class": "ReactFieldEditor"
            },
            "children": [
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ReactFieldEditor-titleContainer"
                    },
                    "children": [
                        {
                            "elmType": "span",
                            "attributes": {
								"iconName":"Calendar"
								"aria-hidden":"true",
                                "class": "ms-Icon ReactFieldEditor-titleIcon root-143"
                            },
                            "txtContent": ""
                        },
                        {
                            "elmType": "span",
                            "attributes": {
                                "class": "fui-Label ms-Label ReactFieldEditor-fieldTitle ___1mnryf3 fk6fouc f19n0e5 fkhj508 fytdu2e fl43uef ftgm304 f1sbtcvk fifp7yv fdghr9 f1asdtw4"
                            },
                            "txtContent": "Date"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ReactFieldEditor-core--display",
                        "role": "button"
                    },
                    "children": [
                        {
                            "elmType": "div",
                            "attributes": {
                                "class": "od-FieldRenderer-text fieldText_dc7ba0fe"
                            },
                            "txtContent":
							"=if(Number([$Date]) == 0,'',toLocaleDateString([$Date]))"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "attributes": {
                        "class": "ReactFieldEditor-state"
                    }
                }
            ]
        }
		]
		}

Moreover, through SPFX extensions this I think will be over-work to have it applied just to ONE SIMPLE LIST FORM.

Can you reproduce the code to check why the pseudo code is created in the first place?

amke321
Copper Contributor
Oct 24, 2024
renatocamara Were you able to produce the result by following the code/settings. Or is it an AI powered reply?

Forum Discussion

JSON Attribute iconName Creates Pseudo class of CSS (::before) which Repeats the Icon

3 Replies

Resources