I'm trying to get custom context menu items to show Icons on the grids context menu.
I can't get any icons to show up in the context menu. I can get some show up just in code but not all:
<p>Sync Fusion Icon(\e250):<span class="e-icon e-upload"></span></p>
<p>Sync Fusion Icon(\e309):<span class="e-icon e-recurrence"></span></p>
<span>Below is a font awesome Icon</span>
<span class="e-warning"><fa-icon [icon]="['fal','info-circle']" class="mr-2"></fa-icon> Grid looks different? Just right click on a row for actions.</span>
CSS for icons:
Context menu item with icon:
text: this.actions.Complete,
id: this.actions.Complete,
iconCss: 'e-icon e-upload'
In the following screenshot both of these highlighted items have the same CSS class.
I've added the fabric.css from you CDN. <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" rel="stylesheet" />
I've also added the following imports into my main styles.css class.
@import '../node_modules/@syncfusion/ej2-base/styles/fabric.css';
@import "../node_modules/@syncfusion/ej2-buttons/styles/fabric.css";
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-base/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/fabric.css';
@import '../node_modules/@syncfusion/ej2-angular-popups/styles/fabric.css';
I'm assuming I am messing up a css class or do not have the right imports.
The documentation around icons and what you need to import to make them work seems very limited or I just can't seem to find it. None of the forum posts I could find helped and most the looked good refenenced properties of the ContextMenuItemModel that do not exist like iconPath.
What would be nice is some examples, in Angular, of how to use other Icon libraries like font awesome.