The UI Fabric icons are easy to use in column formatting by simply specifying the name in the
iconName attribute. However, the available selection of icons may not always meet your needs.
Fortunately, you can use inline SVG elements with custom paths. This means you can use icons from sources like Font Awesome that provide SVG versions of their icons!
This sample uses the value of the current field to show a custom icon and color. The icon is specified through the
d attribute of the path element. The paths have been scaled and extracted from Font Awesome icons. This sample uses gender and provides a default display when neither Male nor Female is selected.
The pattern of using nested conditional operators with equality operators is the column formatting equivalent of a switch statement. The same logic is used 3 times in this sample. First for the
fill style attribute to determine the color of the icon. Next, it is used for the
d attribute of the
path element to change the icon. Finally, it is used for the
color style attribute to ensure the text color is also changed.
Currently, column formatting does not support the
viewboxattribute which causes issues with SVGs that rely on it to properly scale (basically all of them). You'll need to adjust the page size to have the path coordinates drawing at a 1:1 scale instead of relying on viewbox translation. One approach is to use a tool like Inkscape using the approach described here Use Font Awesome icons in Column Formatting.
- This format can be applied to a text/choice column and uses the values Female, Male, or anything else
|1.0||March 26, 2018||Initial release|
|1.1||August 20, 2018||Switched to Excel-style expressions|
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
The icons used were adapted from Font Awesome which is available under the Creative Commons Attribution 4.0 International license.
An additional version using Abstract Tree Syntax (AST) is also provided for environments where the Excel-style expressions are not supported.