SAPUI5 Development

How to use custom Icon Font in SAPUI5?

         Sometimes we may have experienced situations where SAP icons are not fit to the use case.SAP icons are based on the icon font concept,which is an embedded font not a pixel image.So these icons are easily scalabe and also we can change its color and apply different css effects.
        In this tutorial we will add a custom icon as icon font and register it to sap.ui.core.IconPool.We will also see it in SAPUI5 application.

Steps


  1. Prepare vector images for the custom icon.You can create or you can download from site like www.flaticons.com .SVG files(.svg) are easily scalable
  2. Convert your vector icons to icon font.icomoonApp is a free tool for converting svg icons to icon font.I selected an icon from this app and downloaded the icon font.
  3. Create SAPUI5 application.If you dont know howto refer SAPUI5 application using SAPWebIDE.
  4. From project folder right click on css folder and create fonts folder inside it.

  5. Right click on fonts folder and import our downloaded font files to fonts folder.(I imported .svg,.eot,.ttf,.woff files)
  6. Now project structure will look like this.
  7. Open styles.css and paste below code.


  8. Now we need to register our icon font to sap.ui.core.IconPool.Paste below code inside Component.js init method or our  View1.controller.js's onInit method.


  9. Now we can use our custom icon in our application.Paste code in View1.view.xml.


  10. See it in action.Run the app.My output is below.


If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon

0 comments :

Post a Comment

Powered by Blogger.