How do I add icons to SPFx Webpart?

How do I add icons to SPFx Webpart?

How to get started,

1. Download the attached code.
2. Open the command prompt and navigate to the folder.
3. On the command prompt, type the below command.
4. Once the npm packages are installed, on the command prompt type “gulp serve”.
5. Open SharePoint site.
6. Navigate to /_layouts/15/workbench.
7. Add the webpart to the page.

How do I use Fluent UI icon in SPFx?

Selecting Fluent UI Icons using PnP IconPicker control in the SharePoint Framework (SPFx) web part

1. Create a new web part project.
2. When prompted:
3. Configure the custom properties. Create a new source code file under the src\webparts\\components\ folder of the solution.
4. Deploy the solution. Sharing is caring!

How do I add an icon to a SharePoint site?

To change the site icon:

1. Navigate to the Site Settings page by clicking the Settings gear icon and choosing Site Settings.
2. Click the Title, Description, and Logo link in the Look and Feel section.
3. Click the From Computer link and browse your computer for the image you want to use as a logo.

Where do I find icons for SharePoint webpart?

If you specify both the officeFabricIconFontName and the iconImageUrl properties in web part manifest, the icon specified in officeFabricIconFontName will be used. Each web part should have an icon which will speak about itself. Prefer to use Office UI fabric available icons in your web parts.

How to define an icon for a web part?

One way to define the icon for your web part is by using the officeFabricIconFontName property. This property allows you to choose one of the icons offered as a part of Fluent UI. For a list of available Fluent UI icons, see Icons.

How to configure Web part icon in Microsoft Docs?

Copy the base64 string and use it as the value for the iconImageUrl property in the web part manifest. Base64 encoding works for both bitmap images, such as PNG, and vector SVG images. The benefit of using base64-encoded images is that you don’t need to deploy the web part icon image separately.

How to use the latest set of Fluent UI icons for SPFX?

Also if there is ever updates to the icon set, will this code just be able to access the new icons on its own or do I need to do something manual like re-compile the sppkg and upload it again to the app catalogue? When we want to use basic icon or Icon with custom color or Icon using custom svg, we need to use FontIcon component.