How to use SVG icons with Syncfusion components such as ContextMenu?

Question

I am using Syncfusion's Angular Context menu component. I was looking at this demo and wanted to add my own icons to the component. How to add icons is by adding CSS classes.

public menuItems: MenuItemModel[] = [
    {
        text: 'Cut',
        iconCss: 'e-cm-icons e-cut'
    },
    {
        text: 'Copy',
        iconCss: 'e-cm-icons e-copy'
    }
];

This is not sufficient for me because the icon set they provide is extremely limited. How can I add my own SVG icons to the ContextMenu component?

Answer 1

We can achieve your requirement using iconCss property. Please refer below code snippets.

public menuItems: MenuItemModel[] = [
    {
        text: 'File',
        iconCss: "custom-icon file",
        items: [
            { text: 'Open' },
            { text: 'Save' },
            { text: 'Exit' }
        ]
    },
    {
        text: 'Edit',
        items: [
            { text: 'Cut' },
            { text: 'Copy' },
            { text: 'Paste' }
        ]
    },
    {
        text: 'View',
        iconCss: "custom-icon cal",
        items: [
            { text: 'Toolbar' },
            { text: 'Sidebar' }
        ]
    },
    {
        text: 'Tools',
        items: [
            { text: 'Spelling & Grammar' },
            { text: 'Customize' },
            { text: 'Options' }
        ]
    },
    { text: 'Go' },
    { text: 'Help' }
];

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

.file {
    background-image: url(image/file.svg);
}

.custom-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    margin: 4px;
}

.cal {
    background-image: url(image/calendar.svg);
}

For your reference, we have prepared a sample:

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app-18175361521317925097