On selecting Icon and click save. For changing the icon, if it’s one of the default fabric UI icons, we need to set IconName property and also ThumbnailType should set to 2, if it’s a image URL we need to set ImageUrl property and also ThumbnailType should be 1, then I updated GetQuickLinkItem method: static JObject GetQuickLinkItem(int quickLinkItemId, WebInfo webInfo, QuickLinkItem quickLinkItem) { var siteUri = … What gets me excited most about this property pane, is that it is not built specifically for this web part. Let’s copy that value and we’ll paste it into our property pane for a new tile in the “UI Fabric icon name” field. Fill in your details below or click an icon to log in: You are commenting using your WordPress.com account. of the Tiles web part is that you can only source icons from the Office Fabric Icon library. To start customizing, set the page in edit mode and edit the web part. While it is a different editing experience, it actually has some real sweet under the covers. On selection of icon from Icon picker control, set the state of selected icon name. If you’ve found this post, it’s likely you already know what the PnP Starter Kit is. md PnPControlsDemo cd PnPControlsDemo. Display this icon by using Icon control of Office UI fabric and setting the iconName property from state object. How to create conversational bots for Microsoft Teams, Register new bot with Microsoft Azure’s Bot Framework from Azure Portal for MS Teams, Leverage Microsoft Graph & third-party APIs in SPFx solution. Office UI Fabric React ist das Front-End-Framework zur Erstellung von Oberflächen für Office und Office 365. You can find a summary of current release at this link. Search the Office fabric UI icons you need here and copy the icon name like "Archive". Now let us modify code to use these controls. The PnP Starter Kit is an open source initiative that provides an end to end solution for provisioning pre-built sites, web parts, extensions, site designs and more in an Office 365 environment. This control will allow us to search and selects an icon from office-ui-fabric-react icons. Let’s navigate to the UI Fabric website and find the icon for Microsoft Forms. 29.3k 1 1 gold badge 29 29 silver badges 57 57 bronze badges. This web part allows you to customize which icon to load, the size of the tiles and where the tiles link to. Please note we have just added line ‘context:this.context’ . So if you look at above code, what we are doing is. 2. What I mean by that, is in order to change the tiles and their links, you’ll have to actually open up and edit the web part every time. https://developer.microsoft.com/en-us/fabric#/styles/icons. If you open up the properties, you will notice in the header a description that specifies how to change/add the icons to your tile. it has also provided some reusable controls which can be used in SPFx web parts and extension. ```handlebars