In this article, you will find out more about the designing icons and configure it's properties.

Custom Images

Data stewards and other users of xDM will find the application more intuitive if they see icons indicating the type of object that they are working with and colors to group related items together.

Semarchy xDM includes hundreds of icons by default. To build on this, you can provide your own icons. Here's an example of how to create images based on the standard Material Design Icons but with background colors.

A Semarchy xDM application with customized Images
A Semarchy xDM application with customized Images

To begin, you need Material Design Icons. Material Design Icons are available directly from Google at material.io. But the set of icons that ship with Semarchy xDM is the set available from https://materialdesignicons.com/  This set includes 100% of the icons from Google, and it also contains many additional variation on many icons.

You can search for any icon from the search tab and export it. For good resolution, select the SVG optimized format available on the Icon Package menu before export.

Instructions

The editor used in this example is PowerPoint. Using other editors are fine as well.

  1. Create your background’s image with the color of your choice. When these images are displayed in Grid View, they have an aspect ratio of 4:3. Typically your images should be created in this aspect ratio.
  2. Copy your SVG icon obtained from materialdesignicons.com
  3. Place the icon in the center of the image. These icons are all square (1:1 aspect ratio) and normally should be in the center of the colored background image.
  4. Optionally adjust the image as desired. For example: the attached PPT example has a light shadow behind the icons.
  5. Select your image on the slide (colored rectangle + icon), right click and select save as image. PNG is typically the simplest choice.
  6. Load it to the image library for use. If you are not familiar with this part, read our documentation about managing image libraries https://www.semarchy.com/doc/semarchy-xdm/xdm/5.3/Admin/image-libraries.html

Find a sample PPT with icons used for our demo server attached to this discussion.