Sp-dev-docs: Action Button Icon Rendering as Square Placeholder

[sbglr]

When using the "Add an action button to a field (advanced)" code verbatim, the "Mail" icon renders as a square placeholder in multiple tenants across all devices I've tested on. The action itself of opening a compose window works with no issue, it's just the icon seemingly failing to render. Any insight into what might be happening?

Microsoft Support was able to reproduce on their end but unable to provide any insight as to why.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: f60068c3-4534-a400-350b-fdbcefd684b6
• Version Independent ID: 228accdb-a7de-0671-34ad-60a37866c380
• Content: Use column formatting to customize SharePoint
• Content Source: docs/declarative-customization/column-formatting.md
• Product: sharepoint
• GitHub Login: @spdevdocs
• Microsoft Alias: spdevdocs

[sbglr]

Following up. After screwing around with the code a little bit I figured out that removing the line below resolves the issue. Is this an edit I'm allowed to suggest to the doc?
"class": "sp-field-quickAction",

[thechriskent]

Good catch! This is an issue with the sp-field-quickAction class. Until recently this was the definition:

.sp-field-quickAction {
    font-size: 14px;
    font-weight: 400;
    padding: 0;
}

However, a recent change introduced the font-family attribute which is overriding the UI Fabric font.

.sp-field-quickAction {
    font-family: "Segoe UI Regular WestEuropean","Segoe UI",Tahoma,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 0;
}

So, the solution is to fix this class by removing the font-family attribute. We should leave the docs alone since this was previously (and will be again) correct information.

For now, you can continue to use the sp-field-quickAction class and add an additional style attribute for font-family to the a element to override the issue:

{
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "style": {
              "font-family": "FabricMDL2Icons"
            },
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickAction",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

[sbglr]

Right on! Glad to hear I'm not crazy and this really did change under my nose.

I've gone ahead and implemented the enclosed bit of code. Thanks for the background on this, it makes a ton of sense.

[rbert83]

When do they think this will be fixed?

[thechriskent]

@ldemaris I noticed this issue wasn't listed as status:tracked and didn't want it to fall through the cracks. This is still an issue that makes sp-field-quickAction an unusable class. It also appears to be a relatively trivial fix (removing the font-family from the class) at least from an outside perspective. Thanks!

[arneivar]

sp-field-quickAction is unusable, but sp-field-quickActions (with plural s) works nicely...

[thechriskent]

@arneivar unfortunately, that class doesn't exist. So adding (the plural version) does prevent the class from overriding the font-family attribute - but not because that is the correct class but simply because nothing is applied. This issue needs to be corrected with the actual class sp-field-quickAction. In the meantime, however, leaving it off and setting the other properties manually or adding it and overriding the font-family as shown above is the correct approach.

[arneivar]

@thechriskent, Thank you for the clarification. I was tricked by the icon that rendered correctly.

[spurr82]

Hi is this still an issue? the reason I ask is im not able to render some icons, Mail works but im trying to use OpenInNewWindow, alot of others dont work also

{ "elmType": "a", "style": { "font-family": "FabricMDL2Icons" }, "txtContent": "", "attributes": { "target": "_blank", "iconName": "OpenInNewWindow", "class": "sp-field-quickAction", "href": { "operator": "+", "operands": [ "https://MyTenant.sharepoint.com/sites/MySite/Lists/MyList/Item/editifs.aspx?ID", "@currentField" ] } } }

[spurr82]

@thechriskent , any idea how i can can get this working?

[thechriskent]

Not all icons listed on the UI Fabric site are supported in the list views (or SharePoint Framework) because of differing versions of UI Fabric being used (the site always represents the latest release). This is extremely frustrating and something I've personally complained about to the UI Fabric guys. A simple version selector that adjusted the list of icons and the documentation would be very helpful.

Unfortunately, the only way to tell for now is trial and error. Most of them work (and the others will eventually work). So, do as you've done, and verify a known icon like Mail work in your format then switch them for the others (they are case sensitive) to see if they will work.

[msft-github-bot]

Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues