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


Originally published at sharepointwidgets.blogspot.com on August 23, 2017.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade