To begin customizing your app, you can change the default fonts, icons, and app icon.

Add a New Font

We support the use of any TrueType font in your font definitions.

Once you have a .ttf file you’d like to add:

  1. Use a program like FontForge or FontBook to verify that the “Fontname” (FontForge) or “PostScript name” (FontBook) is the same as the file name (without the .ttf extension).
  2. Use a program like FontForge and ensure that the font has a glyph for U+25CF (the password masking character).
  3. Copy your .ttf file to institutions/mxmobile/assets.

After you’ve added and verified your .ttf file:

  1. Edit institutions/mxmobile/config/themes/theme_light.json, and change any font definitions you want to the new .ttf filename.
  2. Run ./generate.

If building on iOS, you may want to follow some additional steps to minimize problems:

  1. In the Xcode project navigator, add the font to the assets group.
  2. Edit proj.apple/Info.plist and add the font file name to the UIAppFonts array.

Change Your Icons

We recommend using the default icon size for any new icon you use.

All default icons are located in the client folder: /client/default/assets/icons.

But to change an icon, you must override it in the institutions folder:

  1. Open institutions/mxmobile/assets/mxmobile/icons, then place your new icon (which has the same name as the default icon you want to replace).
  2. Run ./generate.

Change Your App Icon

Your app icon should be a 1024x1024px .png file called icon_alternate.png. You can ask MX to update the icon, host it locally, or host it at a remote location.

To host it locally:

  1. Edit institutions/mxmobile/config/overrides.yaml and set:
    • icon_url: http://localhost:9000/icon_alternate.png.
  2. Move your new image to your Desktop.
  3. In the Desktop directory, run python3 -m http.server 9000.
  4. Run ./generate