Adding WebPart Icon - SharePoint Client Webpart

Hi Friends, When we are developing any webpart we get the webpart icon as a page icon by default.



So, here is the way how we can change this icon that suits the ultimate purpose of the webpart.
To change open the manifest.json found inside the your webpart folder


Edit the file and under the "OfficeFabricIconFontName" you can enter the icon name you want to display.
You can find the icon names from the below URL: https://dev.office.com/fabric#/styles/icons
OR
Below is the list you can choose from
  • 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

You can even add your custom image by replacing the "OfficeFabricIconFontName" with "IconImageUrl" and enter the URL from where the image needs to be loaded. Since it is the container the image will be resized by itself.

If both are specified than "OfficeFabricIconFontName" will be given priority.

Now you can make your webpart look and express right from the first look.

Happy Coding 👍
For more code samples visit : https://github.com/sumitkanchan4

Comments

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Checking user permission in SharePoint Framework (SPFx) webpart

SharePoint Image Gallery