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

How to add a custom icon to the ListView command set in the List and Library view.

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.

Let’s get started.

Step 1

Navigate to the existing solution folder or create a new one using the above-referred link.
  1. 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.

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

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.

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

Step 4 - Build, Bundle and Package the Solution

Navigate to View -> Integrated Terminal

SharePoint Framework (SPFX) Extension - Add Custom Icon To List View Command Set
  1. Run Gulp Build   
  2. Run Gulp Bundle –ship   
  3. 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. 

SharePoint Framework (SPFX) Extension - Add Custom Icon To List View Command Set
 
Step 6
 
Navigate to Library i.e. Targeted Template.
 
SharePoint Framework (SPFX) Extension - Add Custom Icon To List View Command Set
 
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.