CoreMedia provides a complete set of Studio Icons in the included Studio icon font. Since the ExtJS Framework supports the use of icon fonts, it is recommended to use this mechanism. If the provided set of icons meets your requirements, you can make use of the icons by accessing them through the CoreIcons.properties file, which is generated by the core-icons module. This file offers a mapping of keys to CSS classes.

You can add CSS classes to components by passing entries of the CoreIcons.properties file to the iconCls of your component as shown below:

<ui:IconDisplayField
itemId="helpIcon"
iconCls="{resourceManager.getString('com.coremedia.icons.CoreIcons', 'help')}">

CoreMedia recommends not using the generated CSS classes as a string in cls configurations, since the name of these classes can always change after upgrading to later versions of CoreMedia Studio. Use CoreIcons.properties as a robust interface instead.

The core-icons module 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);

The $statusproxy-add-glyph - like any other ExtJS glyph variable - expects you to pass the content, size and font-family as a list of values. The variable in the example above are generated by the CoreIcons module. 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 component with a scale configuration. The component will automatically choose the right scale for the icon, based on its own scale configuration.

The CoreMedia Icons are an essential part of CoreMedia Studio and it is therefore not recommended removing the CoreMedia IconFont from the workspace. Nevertheless, Sencha offers ways to include additional icon fonts as described in the Sencha Font Packages documentation. Available font packages are ExtJs, FontAwesome and Pictos.

Using icon fonts is the recommended way to display icons in CoreMedia Studio. However, it is still possible to display icons or images without using a particular font. Section 7.1, “Studio Plugins” describes how to load external resources. You can then address these resources in your SCSS code as follows:

.my-icon {
  background-image: url(get-resource-path("images/example.svg"));
}

Then pass the CSS class to the ui configuration of your component:

<Button iconCls="myButton"/>

Whenever you feel to use an image as an icon, try to use SVG files. They have the same advantages as icon fonts: