DEV Community

thebernardlim
thebernardlim

Posted on • Updated on

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

Top comments (0)