Fundamental Library Icon Update

SAP Fiori introduces a new family theme called Horizon. The theme of family has been evolving iteratively. However, this latest update takes more than just theme upgrades. See the previous post for more details. 

Some components, for example, have changed not only their color, but also their design:

Switch%20in%20Quartz%20Light%20theme

Switch in Quartz Light theme

Switch%20in%20Morning%20Horizon%20theme

Switch in Morning Horizon theme

 

 

Another update is included in the SAP Icon font. Some icons have been completely revamped, while others have undergone minor changes. However, the naming of the icons has not changed and if you are already using SAP Icons, there shouldn’t be any impact on your project. A comparison between the two icon versions is displayed below. 

 

New%20Icons

New Icons

 

Old%20Icons

Old Icons

 

The color mapping and SAP Font icon variants are created by a central design team and included in another npm package (theming-base-content) which Fundamental Library is consuming and building on top. 

If you are looking to incorporate the SAP icons in your project, you can import either the latest icon font file SAP Icons for Horizon or the icon font Fiori 3. The documentation on how you can import the fonts by themselves can be found here. 

 

Example: 

SAP Icons for Horizon 

If you would like to implement the SAP Icons for Horizon, you need to import: 

 


@font-face {    font-family: "SAP-icons";     src: url("~@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff") format("woff");     font-weight: normal;     font-style: normal;     }   

Fiori 3 

If you would like to implement the Fiori 3 icons you need to import: 


@font-face {    font-family: "SAP-icons";    src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff") format("woff");    font-weight: normal;    font-style: normal;    } 

 

Follow the Fundamental Library Styles Community to stay tuned for the updates. If you have any questions feel free to post them in the comment section below or in SAP Community Q&A.