Using UI Fabric Icons for ListView Commands

[thechriskent]

Category

• Question
• Typo
• Bug
• Additional article idea

In addition to the iconImageUrl property for commands, an implementation of the officeFabricIconFontName property that would match the functionality of the same property for client-side web parts and allow the specification of a UI Fabric icon class name.

Currently, the iconImageUrl property generates this markup when located in the Toolbar:

<span class="CommandBarItem-icon">
  <i class="ms-Icon ms-Icon--custom" data-bind="style: { backgroundImage: 'url(\'' + $parent.iconUrl() + '\')' }" style="background-image: url(&quot;icons/request.png&quot;);"></i>
</span>

The proposed officeFabricIconFontName property with a value of "Emoji2" could generate something similar to this:

<span class="CommandBarItem-icon ms-Icon ms-Icon--Emoji2"></span>

Here's how that might look (I've replaced the generated markup with the proposed markup on the page directly):

For reference, here is the definition of the officeFabricIconFontName property from the client-side-web-part manifest.schema.json:

"officeFabricIconFontName": {
  "title": "Office Fabric Icon Name",
  "description": " The icon for the Web Part, to be displayed in the toolbox, represented as a character name in the Office 365 icon font file. The icon font is specified here: http://o365icons.cloudapp.net/. If this field has a value, the 'iconImageUrl' field will be ignored.",
  "type": "string",
  "minLength": 1
},

[johnthen]

Hi, I am getting this error:

Error - [write-manifests] Manifest validation error (./src/extensions/helloWorld/HelloWorldCommandSet.manifest.json): (#/) Data does not match any schemas from 'oneOf' (#/) Missing required property: description (#/) Additional properties not allowed: items (#/componentType) No enum match for: Extension (#/) Missing required property: preconfiguredEntries (#/items/COMMAND_2) Additional properties not allowed: officeFabricIconFontName (#/) Missing required property: rootComponentId

My manifest code as below:

"COMMAND_2": { "title": { "default": "Command Two" }, "iconImageUrl": "icons/cancel.png", "officeFabricIconFontName": { "title": "Emoji2", "description": "Testing", "type": "string", "minLength": 1 }, "type": "command" }

Can you please share a working code example how to change the command set icon by using office fabric icon?

Thanks.

[GrumpyWookie]

This is a comparison of the render'ed HTML - for a OOTB button - vs. a custom embedded set.
I would expect that the manifest.json can thus allow the following :

"items": {
"MCD_CMD": {
"title": { "default": "MCD" },
"icon": "Emoji2",
"type": "command"
}

But - this has an error - doesn't match the schema :
https://dev.office.com/json-schemas/spfx/command-set-extension-manifest.schema.json

*** What schema do the OOTB commands use ??

[AsishP]

So, is this a current limitation with SPFx command extensions? Would prefer to link back to Fabric Icons instead of creating new ones.

[waldekmastykarz]

That's indeed a current limitation of extensions. @VesaJuvonen should it be logged as a new feature on UserVoice or is it keeping it as an issue here sufficient?

[AsishP]

Reading the first article from @thechriskent, seems like this is already implemented? Or that part is for something else?

[VesaJuvonen]

@AsishP - that part is a suggestion for @thechriskent towards us in SP engineering on how it should work... but it has not been implemented. I'd suggest to create a UserVoice entry for this and until that's available, different supported options are presented in following article: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/configure-extension-icon.

[thechriskent]

@AsishP sorry for the confusion! The above screenshots were made my manipulating the DOM to show what I thought it might look like.

Not sure why I never submitted this as a UserVoice entry, but it looks like Alex Terentiev did on October 5th: https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform/suggestions/31781332-allow-to-use-office-ui-fabric-icons-and-other-font

Go give that entry a vote!

[AsishP]

Thanks @VesaJuvonen and @thechriskent. I have voted for this user voice. Something out of this thread, could you please also provide some guidance on the below. Don't know if I should submit new voice or they are threads on these.

1. Grouping of multiple commands on Command Bar as done by the 'New' command. I can see an example here - https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/modern-experience-customizations-customize-lists-and-libraries#user-custom-actions, but don't know how does it link to SPFx extensions
2. Listview route refresh after an update is done to a record using SPFx extension. Currently I am refreshing the whole page which is not a good flow.
3. BaseDialog 'isBlocking' IDialogConfiguration override is not working. This seems to be a bug to me but may be something I am doing wrong (Following this example - https://github.com/SharePoint/sp-dev-docs/blob/master/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md)

[VesaJuvonen]

hi @AsishP - since follow up questions are not really related on the Office UI Fabric usage, would suggest to open up a new Issue for those, so that they are tracked separately and they will not get hidden in issue with different subject/title.

In sort rules are following - if you have a question, feel free to ask that on this issue list. If the feature is not possible and it a new capability, we'll guide you to UserVoice as needed. Would also recommend to open one issue for one item, so that we can track things more easily and to ensure that we can get you answers on the things faster.

In these specific things

1. Not supported - good enhancement suggestion - UserVoice
2. Question to be asked separately in issue list
3. Potential bug, so it would be good to get it reported separely, so it's not getting hidden

Also notice that we do recommend using the docs.microsoft.com side of the documentation - much better experience for reading and following up on the tutorials. That document would be here - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/using-custom-dialogs-with-spfx.

Since the actual issue which the subject was all about has been tackled, will close this one, but would suggest opening 2 new issues with updated subjects on the topics of #2 and #3 in your message.

[thechriskent]

@AsishP for your number 2 item, there is an open issue for that here: #818 where it is being tracked and has been added to the team's backlog.

[AsishP]

Thanks @VesaJuvonen for the guidance. Would follow up on that. A quick feedback, it has been a great interesting journey till now while working with SPFx webparts and extensions. Would be happy to contribute to the community in any way.

[kachihro]

Why can't we use the same way as for a WEBPART ??
https://blog.mastykarz.nl/specify-icon-sharepoint-framework-client-side-web-part/

This would be a good option - with a "officeFabricIconFontName" attribute in JSON.

I'm revisiting this with a new project - and this hasn't been updated in the last 12 months (Nov 2017)...