How to add office fabric icon to SharePoint framework extension ListView Commands

When you use SharePoint framework extension ListView Commands, you will notice that the icon is configured to point to the local file like the configuration below.

  "items": {

    "COMMAND_1": {

      "title": { "default": "Eln Init" },

      "iconImageUrl": "icons/cancel.png",

      "type": "command"

    }

  }

Unless you download and place the icon to some where, there is no OoB easy way to point to office fabric icon. There is a user voice you should vote so this can be added in the future. At meantime, here is the way to use as base64-encoded image described here as the workaround.

Here is the detailed procedure to convert Office fabric UI icons to base64-encoded image so you could use in the SPFx extension ListView Commands.

1. Search the Office fabric UI icons you need here and copy the icon name like "Archive".

2. Use Josh's tool online to convert to base64-encoded image. You could change the color and some other parameters. After clicking the "Render Front Icon", you could copy the "Data URL" as the base64-encoded image.

3. You could "Color picker" online to identify the color you need as the screenshot below.

4. You could paste the copied to serve.json.

  "items": {

    "COMMAND_1": {

      "title": { "default": "Eln Archive" },

      "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......",

      "type": "command"

    }

  }

Now the icon will be displayed after solution deployed.

Of cause you could also download the icon and placed to CDN or local SharePoint site. Hope the future enhancement will allow us to direct point to office fabric icon.