CoreMedia provides a complete set of Studio icons in the included Studio icon font. Since the Ext JS framework supports the use of icon fonts, it is the most commonly used mechanism. If the provided set of icons meets your requirements, you can make use of the icons by accessing them through the CoreIcons_properties.ts file, which is generated by the core-icons package. This file offers a mapping of keys to CSS classes.

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

Config(IconDisplayField, {
  itemId: "helpIcon",
  iconCls: CoreIcons_properties.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.ts as a robust interface instead.

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.

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

While using icon fonts is the most commonly encountered way to display icons in CoreMedia Studio it is possible to display icons or images without using a particular font. Section 9.3, “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 iconCls configuration of your component:

Config(Button, {
  iconCls: "my-icon",
})

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

Since CoreMedia v11 it is also supported adding an SVG directly in TypeScript:

import myIcon from "./icons/my-icon.svg";

console.log(`SVG code:\n${typeArticle}`);

Importing directly from an *.svg file requires a type definition file in the src folder, for example src/custom.d.ts:

declare module "*.svg" {
  const content: string;
  export default content;
}

As the definition file implies, importing an *.svg file yields a string result with the contents of the file. You can then pass the content to any JavaScript function or render it directly into the DOM. The package @coremedia/studio-client.base-models provides a utility class SvgIconUtil which offers a function that generates an icon class out of a given SVG code so that it can be used like an icon font (monochrome icon, color determined by text color):

Config(Button, {
  iconCls: SvgIconUtil.getIconStyleClassForSvgIcon(myIcon),
});