SharePoint Framework (SPFX) Extension - Add Custom Icon To List View Command Set

Overview

SharePoint Framework extensions extend the user experience toward the Modern Framework Lists and Libraries to render custom components.

In this article, we are going to learn how to add a custom icon to the SPFx Extension named ListView Command Set.

List View Command Set is used to render custom action to List or Library level Views.

Read my previous article, How to add List View command Set to List and Library using SharePoint Framework Extension from scratch, before going any further. 

Let’s get started.

Step 1

Navigate to the existing solution folder or create a new one using the above-referred link.

Type Code .

It will open the project into an open source IDE, i.e., Visual Studio Code (condition - VS Code must be installed on your system).

Step 2 - Navigate to Manifest.Json file

Click the Solution Name -> SRC -> Extensions -> Extrension Name -> MetadataCommandSet.manifest.json file.

You will find the default image icon URL.

Step 3 - Replace the OOTB Icon URL with Custom Icon URL.

Replace the OOTB Icon URL with the absolute path of a custom icon.

Note
Relative path of the icon doesn’t work.

Step 4 - Build, Bundle and Package the Solution

Navigate to View -> Integrated Terminal

Run Gulp Build
Run Gulp Bundle –ship
Run Gulp Package-solution –ship

Step 5 - Package Deployment

The package can be deployed at Tenant Level App Catalog or Site Collection level Catalog. It really depends on the project scenario and governance policies to the usage of the designed app which is a preferred option. No changes are required in the above with either of the deployment solutions.

I prefer to deploy at site collection for this demo. Navigate to Modern Site Collection.

Go to Site Content -> App for SharePoint -> upload the .SPPKG file and click to deploy the solution.

If the same package already exists, don’t forget to check-in the package else it will not be available to other audience. 

 

Step 6

 

Navigate to Library i.e. Targeted Template.

 

 

Select an item and you will find a custom icon appearing in the command set.

Hope you have learned something new in this article. Stay tuned for more SPFx articles to get more insights and learning.