A new version of the SharePoint Framework Table of Contents extension was released to display all headers of a page into a site page.

New version of Table of Contents - v1.0.0

This release includes a fix for the bug about the icon that is not visible and a feature to specify a custom image rather than using Fluent UI icons as well as some other improvements.

Fix Icon display

Some users can not see the UI Fluent icon even if this one was correctly configured.

To fix this issue, the Icon React element is used rather than the CSS class only. Thanks to this method, the selected icon is embedded and can be displayed.

Image Icon

Table of Contents button with a custom image

If the panoply of UI Fluent Icons is not sufficient for you, you can now specify the URL of your own image/icon into the property of the extension. To use it, simply add the property tocImage and specify the image URL accessible for all of your users.

If you use both tocImage and tocIcon, tocImage has priority

Code Coverage

It was a challenge and an opportunity to include this kind of test into this solution. I will try to include more tests for each new version to reach 100%.

In addition, the code coverage helped me to find solutions for some potential issues that already exist and maybe others not already referenced.


  • Upgrade the solution to SPFx 1.11.0
  • Add french support language
  • Add some CI verification during an MR

Table of Contents Extension repository

Hoping this post will help you 😉

You may also be interested in