Specifying the icon of a SharePoint Framework Client-Side Web Part

For every Client-Side Web Part that we build using the SharePoint Framework we can specify the icon to make it easily distinguishable amongst other Web Parts visible in the toolbox.

Specifying the icon of a SharePoint Framework Client-Side Web Part

When building Web Parts, providing them with an icon helps users find it amongst other Web Parts. Icons of Client-Side Web Parts are set in the Web Part manifest preconfiguredEntries section and there are two ways to set the Web Part icon.

Specifying the Client-Side Web Part icon using an image

One way to set an icon of a Client-Side Web Part is by using a custom image. Using the iconImageUrl property you should specify an absolute URL to an image of 38x38px:

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
  "componentType": "WebPart",
  "version": "0.0.1",
  "manifestVersion": 2,

  "preconfiguredEntries": [{
    "groupId": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
    "group": { "default": "Default" },
    "title": { "default": "Weather" },
    "description": { "default": "Shows weather in the given location" },
    "iconImageUrl": "https://contoso.com/weather.png",
    "properties": {
      "location": ""
    }
  }]
}

Specifying the Client-Side Web Part icon using a font icon

Another way to set the icon of a Client-Side Web Part is by specifying the name of the font icon using theofficeFabricIconFontName.

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",

  "id": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
  "componentType": "WebPart",
  "version": "0.0.1",
  "manifestVersion": 2,

  "preconfiguredEntries": [{
    "groupId": "e71c23c5-4ddb-40b6-9e52-d292a4d8300b",
    "group": { "default": "Default" },
    "title": { "default": "Weather" },
    "description": { "default": "Shows weather in the given location" },
    "officeFabricIconFontName": "Sunny",
    "properties": {
      "location": ""
    }
  }]
}

Despite its name, the officeFabricIconFontName property doesn’t support all icons listed at http://dev.office.com/fabric/styles. Here is the list of all icons that you can use with theofficeFabricIconFontName property.

• Add
• AddGroup
• AlignCenter
• AlignLeft
• AlignRight
• Attach
• Back
• BackToWindow
• BlowingSnow
• Bold
• BulletedList
• Calendar
• Camera
• Cancel
• Chart
• CheckMark
• ChevronLeft
• ChevronRight
• CirclePlus
• Clear
• ClearFormatting
• ClearNight
• CloudWeather
• Cloudy
• Completed
• CompletedSolid
• Delete
• DocLibrary
• Duststorm
• Edit
• EditMirrored
• Embed
• Emoji2
• ExcelLogo
• FacebookLogo
• FavoriteStar
• FavoriteStarFill
• Filter
• Financial
• Fog
• Folder
• FolderOpen
• Font
• FontStyleSerif
• Forward
• Freezing
• Frigid
• FullScreen
• Globe
• Group
• HailDay
• HailNight
• Header
• Italic
• Link
• Message
• MobileSelected
• More
• MultiSelect
• Nav2DMapView
• News
• NumberedList
• OfficeVideoLogo
• OneNoteLogo
• OpenFile
• OpenWith
• Org
• Page
• PageAdd
• PartlyCloudyDay
• PartlyCloudyNight
• Photo2
• Photo2Add
• Photo2Remove
• PhotoCollection
• Picture
• Play
• PowerApps
• PowerBILogo
• PowerPointLogo
• Precipitation
• Preview
• Rain
• RainShowersDay
• RainShowersNight
• RainSnow
• Recent
• Refresh
• Remove
• RemoveLink
• Reshare
• Ribbon
• RightDoubleQuote
• Save
• Search
• Settings
• Share
• SharepointLogo
• SIPMove
• Snow
• SnowShowerDay
• SnowShowerNight
• Squalls
• StackIndicator
• Sunny
• SwayLogo
• Sync
• System
• Tablet
• TabletSelected
• Teamwork
• Thunderstorms
• Tiles
• TVMonitorSelected
• TwitterLogo
• Underline
• Unfavorite
• Video
• View
• VisioLogo
• Webcam
• WordLogo
• WorldClock
• YammerLogo
• Zoom
• ZoomIn
• ZoomOut

And here is how they look like:

In case you want to have a closer look at how the icons look like I’ve built a sample Web Part that shows them. You can find the Web Part on GitHub at https://github.com/waldekmastykarz/spfx-iconfontnames-webpart.

One icon to rule them all

The icon specified using the officeFabricIconFontName takes precedence over the image icon set using the iconImageUrl property. In case you specify both values, the icon from the officeFabricIconFontName property will be used.

Merken