如何在Pimcore 11菜单项目中使用自定义图标

1. 准备并放置自定义图标 #

将你的自定义图标（如SVG、PNG格式）放到Pimcore项目的public/static/custom-icons/目录下（没有该目录则自行创建），确保文件权限设置正确，Web服务器可正常访问。

2. 正确设置图标路径 #

情况1：通过Ext JS代码定义菜单项目 #

不要直接写相对路径，用Pimcore.helpers.getStaticUrl()拼接图标路径替换原来的iconCls：

Ext.create('Ext.menu.Item', {
    text: '我的自定义菜单',
    icon: Pimcore.helpers.getStaticUrl('/static/custom-icons/my-custom-icon.svg'),
    handler: function() {
        // 菜单点击逻辑
    }
});

情况2：通过Pimcore菜单注册API添加后台菜单 #

在Bundle的菜单监听类中，直接指定图标相对于Web根目录的路径：

// src/AdminBundle/EventListener/MenuListener.php
public function getMenuItems(MenuEvent $event)
{
    $menu = $event->getMenu();

    $customMenuItem = new MenuItem('custom-menu-item', [
        'label' => '自定义菜单',
        'icon' => '/static/custom-icons/my-custom-icon.svg',
        'route' => 'your_custom_route_name',
    ]);

    $menu->addChild($customMenuItem);
}

3. 调整图标样式（可选） #

如果图标显示尺寸与Pimcore默认菜单图标不符，添加自定义CSS适配：

.x-menu-item-icon {
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px; /* 匹配Pimcore默认图标尺寸 */
    height: 16px;
}

将上述CSS放到Bundle的public/css/custom.css中，再在Bundle的Resources/config/pimcore/config.yml里注册：

pimcore:
    admin:
        css:
            - '/bundles/youradminbundle/css/custom.css'

4. 清理缓存 #

• 进入Pimcore后台，在「设置 -> 系统 -> 清除缓存」中清理系统缓存
• 手动清理浏览器缓存，确保新图标资源被正确加载

内容的提问来源于stack exchange，提问作者samjacob