Office UI Fabric in Office Add-ins
If you are building an add-in, we encourage you to use Office UI Fabric to create your user experience. Using Office UI Fabric is optional.
The following sections explain how to get started using Fabric to meet your requirements.
Use Fabric Core: icons, fonts, colors
Fabric Core contains basic elements of the design language such as icons, colors, type, and grid. Fabric core is framework independent. Fabric Core is used by and included with Fabric React.
To get started using Fabric Core:
Add the CDN reference to the HTML on your page.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
Use Fabric icons and fonts.
To use a Fabric icon, include the "i" element on your page, and then reference the appropriate classes. You can control the size of the icon by changing the font size. For example, the following code shows how to make an extra-large table icon that uses the themePrimary (#0078d7) color.
<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
To find more icons that are available in Office UI Fabric, use the search feature on the Icons page. When you find an icon to use in your add-in, be sure to prefix the icon name with
Use Fabric Components
Fabric provides a variety of UX components that you can use to build your add-in. We do not expect that all fabric components will be used by a single add-in. Determine the best components for your scenario and user experience (for example, it may be hard to properly display a Breadcrumb in the task pane).
The following is a list of common Fabric React UX components that we recommend for use in an add-in:
|React||Using Office UI Fabric React in Office Add-ins|
|Angular||Consider wrapping Fabric components with Angular 2 components|