Sharepoint Online List webpart is not rendering "Barchart3" FabricUI icons

[jnhrv]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

Tested in a production tenant and different site collection, as well as a different independent developer tenant.

Describe the bug / error

When applying JSON formatting on the Board View of Sharepoint Online list and using the set of "BarChart3" FluentUI icons, the icons are not rendered (or rendered differently) when the formatted board view is used in the List webpart on a Sharepoint page.
I am referring to the following iconnames: BarChart3, BarChart3Zero, BarChart3One, BarChart3Two
Correct display in Sharepoint List

Bad renderring in List webpart

Correct display in Sharepoint List

Bad renderring in List webpart

Steps to reproduce

1. Use the following attributes, conditions and iconnames in the Board View JSON formatting (below is just a piece of code).

"children": [{
    "elmType": "div",
    "style": {
        "padding": "5px"
    },
    "attributes": {
        "iconName": "=if([$Category] == 'Goal', 'BarChart3Zero', if([$Category] == 'Reality', 'BarChart3One', if([$Category] == 'Oportunity','BarChart3Two',if([$Category] == 'Will','BarChart3','More'))))",
        "class": "ms-fontColor-themePrimary ms-bgColor-neutralLighter--hover"
    },
    "customCardProps": {
        "openOnEvent": "click",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "formatter": {
            "elmType": "div",
            "style": {
                "display": "block",
                "padding": "5px"
            },
            "children": [{
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "font-size": "10px"
                    },
                    "txtContent": "ACTIONS",
                    "attributes": {
                        "class": "ms-fontColor-gray100"
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Flag": "=if([$Flag] == true,0,1)"
                        }
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "flag"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "=if([$Flag] == true,'Remove flag','Add flag')"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "editProps"
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "edit"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Edit properties"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "delete"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Delete"
                        }
                    ],
                    "customRowAction": {
                        "action": "delete"
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "share"
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "link"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Send/Copy link"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Order0": "=Number(@now)"
                        }
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "upload"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Move top"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Expand": "=if([$Expand]==false,1,0)"
                        }
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "=if([$Expand]==true,'CirclePlus','Blocked2')"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "=if([$Expand]==false,'Minimize Card','Maximize Card')"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "font-size": "10px"
                    },
                    "txtContent": "MOVE TO",
                    "attributes": {
                        "class": "ms-fontColor-gray100"
                    }
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Category": "Goal"
                        }
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "BarChart3Zero"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Goal"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Category": "Reality"
                        }
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "BarChart3One"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Reality"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Category": "Oportunity"
                        }
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "BarChart3Two"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Oportunity"
                        }
                    ]
                },
                {
                    "elmType": "div",
                    "style": {
                        "display": "block",
                        "padding": "5px 10px",
                        "cursor": "pointer"
                    },
                    "attributes": {
                        "class": "ms-bgColor-neutralLighter--hover"
                    },
                    "customRowAction": {
                        "action": "setValue",
                        "actionInput": {
                            "Category": "Will"
                        }
                    },
                    "children": [{
                            "elmType": "div",
                            "style": {
                                "display": "inline-block"
                            },
                            "attributes": {
                                "iconName": "BarChart3"
                            }
                        },
                        {
                            "elmType": "div",
                            "style": {
                                "display": "inline-block",
                                "padding-left": "5px"
                            },
                            "txtContent": "Will"
                        }
                    ]
                }
            ]
        }
    }
}]

Expected behavior

BarChart icons should be rendered in both usecases, List and List webpart.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for taking the time to file an issue. We periodically archive older or inactive issues as part of our issue management process, which automatically closes them once they are archived.

If you’d like to understand more about why and how we handle archived (closed) issues, please see Our approach to closed issues.

We appreciate your contribution and if this is still an active issue with the latest SPFx versions, please do resubmit the details. We needed to perform a cleanup, so that we can start with a clean table with a new process. We apologize for the inconvenience this might cause.