Hi Friends.
When we are developing any webpart we get the webpart icon as a page icon by default.
![SharePoint]()
So, here is the way we can change this icon to a way that suits the ultimate purpose of the webpart. To change it, open the manifest.json found inside the your webpart folder.
![SharePoint]()
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 own custom image by replacing the "OfficeFabricIconFontName" with "IconImageUrl" and enter ingthe 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 then "OfficeFabricIconFontName" will be given priority.
For more code samples visit - https://github.com/sumitkanchan4