Use custom icon in Pimcore menu item

Question

Can anyone suggest me how to use custom icons for a menu item in Pimcore 11? I am right now using the iconCls property in Ext js to load a available icon for a newly created menu item. Instead, I would like to use a custom icon, which can be loaded from a filepath.

I have tried using property icon instead of iconCls, but was not working.

Answer 1

1. Add the font to the scss in ExtJS

@font-face {
  font-family: "ExtraIconFont";
  src: url('fonts/ExtraIconFont.eot');
  src: url('fonts/ExtraIconFont.ttf') format('truetype');
}

2. Create a class which describes the font

.pimcore-extra-font {
    font-family: 'ExtraIconFont'
}

3. Add the class to your component

{
    xtype: 'component',
    cls: 'pimcore-extra-font other-cls'
}