Allow custom icon fonts to be used in the Command Bar and any other place ms-Icon is used

[jimbarrett33]

Consider the ability to use custom icon fonts anywhere the ms-Icon fonts are used, especially the Command Bar. iconProps does support setting the url to an image but the images don't scale/zoom well and with images you lose the ability to set color of the icon (color has to be baked into the image). The premise is that apps/add-in's will have features that don't always map to one of the built-in fabric icons and it's simple enough to create custom icons that can be used instead and along side the fabric icons in the same command bar.

Thanks.

[micahgodbolt]

Command bar is getting a full refresh as we speak. How would you want to add your own icon? SVG? Another icon font?

[jimbarrett33]

The preference is to use a custom icon font instead of an image since an icon font will take on the other css properties -- size, color, etc. The color being especially important because this would allow the custom icons to work with theming also.

It seems like the current iconName is mapped to an enum so that probably can't be used unless another enum IconType of fontIcon (or similar) was added and then the name of the custom font icon can be used in iconName. Otherwise maybe another iconProp customIconName (or similar) that overrides iconName or requires iconName to be null.

Ultimately the goal is to get the rendered html to look like: <i class="ms-Icon my-custom-font-name"></i>

The above is the simplified version and I don't know how that maps to what is currently rendered like below which is the Upload icon:

<i role="presentation" aria-hidden="true" class="ms-Icon css-yq28u3 css-w0yocm ms-CommandBarItem-icon itemIcon_ffdfa110 ms-CommandBarItem-iconColor itemIconColor_ffdfa110"></i>

Thanks for considering this.

[edit: I'm not sure about SVG but it may take on the color properties also. Haven't tried that]

[micahgodbolt]

The commandBar will be using the button interface, so that you could create data like this

items={
  [
    {
      key: 'new',
      name: 'Add',
      onRenderIcon: { (iconProps) => <i className="my-button" /></i> }
    },
  ]
}

[micahgodbolt]

This method would work for svgs, images, or whatever you wanted to replace the icon with.

[jimbarrett33]

Thanks, that should work. Is this working now or is it part of the Command Bar refresh for a future build?

[micahgodbolt]

You can check out my commandBar PR #1949 right now. You can pass in custom buttonStyle objects and will soon be able to pass in onIconRender and such.

[jimbarrett33]

Thanks. I looked at this and it seems this would do the job for custom icons. I tried overriding the icon with one of the other examples and I assume it will work similarly. I'm fairly new to the fabric react components so I don't know how this relates to the recent glamor-based styling decision or the degree of customization allowed. I'll do more research.

But another thing that is important to me is the ability to change sizing of components in general -- fonts, padding, margins etc. -- in order to most efficiently use the available space in Office Task Pane Add-ins. The nirvana would be that sizing could also be responsive in that if there is "more room" the fonts, sizing, and control spacing could get larger. I currently do this "manually" using bootstrap with custom CSS breakpoints etc. I could do it the same way with the react components as long as there is an interface to do so.

[micahgodbolt]

I'm going to expose the onReduce function used in the commandBar, so that you can use a custom function that tries reducing the size of fonts, reducing padding etc before moving items into overflow.

[micahgodbolt]

Here's my current idea. Allow custom onReduceData, but be sure to include original function. Then you can try your own reducers before using the default one.

[jimbarrett33]

OK. Thanks. I looked at the ResizeGroup component and it seems similar. I can try playing with that. It seems to allow reducing the margin of button so I guess I could get to font size and padding somehow. And if I put media queries in the .scss using responsive break points then I can achieve responsiveness in font-size and padding. I think this assumes that onReduceData() is called on resize events and I would also have to define the breakpoints in each components .scss file instead of being able to set them once globally. Again, fairly new to fabric React so I could be way off here.

Also, this would work for the CommandBar but what about other components? Seems like they would have to do something similar to dynamically change fonts, padding, etc.

[micahgodbolt]

You could certainly write a single onReduceData function and use it any place where a resizeGroup is used.

[jimbarrett33]

Thanks for the tip. Looking forward to the new CommandBar.

[erichdev]

Closing since it seems questions have been answered, and the new CommandBar should be moving to the main Fabric package soon: https://github.com/OfficeDev/office-ui-fabric-react/pull/3138 Please reply if any issues remain