For legacy reasons, CoreMedia Studio still includes an icon font that is used throughout the application. The icon font is provided by the @coremedia/studio-client.core-icons package and contains a large set of icons that can be used in your own components. The look and feel of these icons does not match the icons in the @coremedia/studio-client.common-icons package.

The resource bundle CoreIcons_properties.ts of the package contains ready to use css classes which can e.g. be passed to the iconCls of your component as shown below:

import CoreIcons_properties from "@coremedia/studio-client.core-icons/CoreIcons_properties";

Config(IconDisplayField, {
  itemId: "helpIcon",
  iconCls: CoreIcons_properties.help,
})

The core-icons package also defines SCSS variables that can be used to assign icons directly in your SCSS code. The following example sets the add icon for the StatusProxy:

$statusproxy-add-glyph: dynamic($cm-core-icons-100-var-plus 16px $cm-core-icons-100-font-name);

$statusproxy-add-glyph - like any other Ext JS glyph variable - requires you to pass the content, size and font-family as a list of values. The variable in the example above are generated by the core-icons package. You can access the content of an icon by using its SCSS variable: $cm-core-icons-[SCALE]-var-[ICON-NAME]

There are 3 different scales in the CoreMedia icon font. These scales differ in details, shown in the icon. An icon with small scale is usually displayed in a size of 16px. Therefore, a lot of details have to be cut out, due to the lack of space to display them. The icon would otherwise be displayed blurry. Of course, you can anyhow always determine the size of an icon for each usage. The following scales are available:

Note

You don't need to worry about scales if you pass an icon as iconCls to a Ext.button.Button. If you make proper use of the scale configuration, the component will automatically choose the right scale for the icon, based on it.