Skip to content
  • Documentation >
  • Extending Ibexa DXP >
  • Extending Back Office >
  • Creating custom icons

Creating custom icons

Custom Content Type icons

To add custom icons for existing Content Types or custom Content Types in Ibexa DXP, follow the instructions below. For more information on icons used in Ibexa DXP, see the Icons section.

Configuration

To configure a custom icon for a Content Type, use the following configuration in config/packages/ezplatform.yaml, for example:

1
2
3
4
5
6
ezplatform:
    system:
        default:
            content_type:
                article:
                    thumbnail: /assets/images/custom_icon.svg#custom

Place the icon in public/assets/images and remember to run yarn encore <dev|prod> after adding it.

Icons format

All icons should be in SVG format with symbol so they can display properly in the Back Office.

Custom icons in Twig templates

Content Type icons are accessible in Twig templates via the ez_content_type_icon function. It requires Content Type identifier as an argument. The function returns the path to a Content Type icon.

1
2
3
<svg class="ez-icon ez-icon-{{ content.contentType.identifier }}">
    <use xlink:href="{{ ez_content_type_icon(content.contentType.identifier) }}"></use>
</svg>

Custom icons in JavaScript

Content Types icons configuration is stored in a global object: eZ.adminUiConfig.contentTypes.

You can easily retrieve the icon URL with the getContentTypeIcon helper function that is set on the global eZ.helpers.contentType object. It takes Content Type identifier as an argument and returns one of the following items:

  • URL of a given Content Type's icon
  • null if there is no Content Type with given identifier

Example with getContentTypeIcon:

1
2
3
4
5
6
const contentTypeIconUrl = eZ.helpers.contentType.getContentTypeIconUrl(contentTypeIdentifier);
return (
   <svg className="ez-icon">
       <use xlinkHref={contentTypeIconUrl} />
   </svg>
)