DEV Community

thebernardlim
thebernardlim

Posted on • Edited on

4

SharePoint List Advanced Formatting - What classes and icons can we use?

One of the common attributes when formatting SharePoint lists are classes and icons. It can get confusing to know what are the actual values that are available to use, as the official documentation does not list this down.

Below is some guidance which will hopefully help.

Class

How to use?

Attribute: "class"

Example



  "attributes": {
        "class": "sp-field-severity--warning"
  }


Enter fullscreen mode Exit fullscreen mode

Class example

Class Source

https://pnp.github.io/List-Formatting/groupings/classes/sp-field/

 

Icons

How to use?

Attribute: iconName

Example



"attributes": {
        "iconName": "CheckMark"
      }


Enter fullscreen mode Exit fullscreen mode

In this example CheckMark is the name of the icon being used.
Note that the icon value is not case-sensitive, hence a lower-cased'checkmark' will still work.

Icons1

Icon Source

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

Icons2

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay