How to use custom font icons (TTF) in SAP MDK Avatar/Image?

[Zineb21]

Hi everyone,

I’m working on an SAP MDK app, and I need to display a bike icon in an ObjectCell avatar. Since there is no suitable sap-icon:// for this, I created a custom icon using IcoMoon and exported it as a font (icomoon.ttf).

My setup:

• Placed icomoon.ttf in the /fonts folder

• In Styles.less:

  .CommuteAvatarIcon {
    font-family: icomoon;
    font-size: 18;
    color: #FFFFFF;
  }

  • In my formatter rule:

     

    return "font://";

    • Applied the style to the avatar

      However, when I build the project, I get this error:

      ERROR in ./build.definitions/Moco/fonts/icomoon.ttf
      Module parse failed: Unexpected character
      You may need an appropriate loader to handle this file type

      It looks like the MDK bundler / webpack is trying to parse the .ttf file as a module.

      My questions:

      1. Is using custom font icons (TTF + font://) officially supported in MDK? (It is normally supported)

      2. Is there a recommended way to include custom icon fonts?

      3. Has anyone successfully used custom icon fonts in MDK avatars or images?

         Any guidance would be appreciated. Thanks

[bill_froelich · Accepted solution]

Yes, MDK supports using custom icon fonts.  To use it you will need to create a branded client.  The font icon files go in the /fonts directory in the .mdkproject structure.   They do not go in the MDK metadata.  Then you can reference them like you indicated in the metadata.