1. Home
  2. Forum
  3. Blazor
  4. How to get e-icons to work?

How to get e-icons to work?

According to the documentation on icons, we should be able to put a Bootstrap4 icon in the toolbar. This is not working for me. I used the code in the documentation example. I also verified the Bootstrap4.css is loading via my _Host file's header.

These icons are cut/paste from the document for testing purposes. 

<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <SfToolbar OverflowMode="@OverflowMode.Popup">
            <ToolbarItems>
                <ToolbarItem PrefixIcon="e-icons e-search" TooltipText="Add a new entity" Text="New entity"></ToolbarItem>
                <ToolbarItem PrefixIcon="e-icons e-upload" TooltipText="Import your data" Text="Import data"></ToolbarItem>
                <ToolbarItem PrefixIcon="e-icons e-font" TooltipText="Export your data to a csv formatted file" Text="Export to csv"></ToolbarItem>
                <ToolbarItem PrefixIcon="e-icons e-font" TooltipText="Export your data to an Excel formatted file" Text="Export to Excel"></ToolbarItem>
                <ToolbarItem Type="@ItemType.Separator"></ToolbarItem>
            </ToolbarItems>
        </SfToolbar>
    </div>
</div>

<style>
    .e-icons {
        color: #00ffff;
        font-size: 26px;
    }

    .e-search:before {
        content: '\e993';
    }

    .e-upload:before {
        content: '\e725';
    }

    .e-font:before {
        content: '\e34c';
    }
</style>

2 Replies 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team September 11, 2020 06:37 PM UTC

Hi Scott Peal, 

Greetings from Syncfusion Support. 

We have validated your reported scenario “How to get e-icons to work?” at our side and we let you know that you have provided the icon content which is not available in the bootstrap4 file. So we would suggest you to add the below content for the icons. Kindly refer the below UG for more details about the bootstrap4 icons. 

Code snippet: 
<style> 
    .e-icons { 
        color: #00ffff; 
        font-size: 26px; 
    } 

    .e-search:before { 
        content: '\e724'; 
    } 

    .e-upload:before { 
        content: '\e769'; 
    } 

    .e-font:before { 
        content: '\e80e'; 
    } 
</style> 

Screenshot: 
 
 
Kindly try the above solution and let us know if you need further assistance. 

Regards, 
Ravikumar Venkatesan 
 


BS Balasubramanian Sattanathan Syncfusion Team September 11, 2020 06:45 PM UTC

Hi Scott Peal, 

Greetings from Syncfusion Support. 

We have validated your reported scenario “How to get e-icons to work?” at our side and we let you know that you have provided the icon content which is not available in the bootstrap4 file. So we would suggest you to add the below content for the icons. Kindly refer the below UG for more details about the bootstrap4 icons. 

Code snippet: 
<style> 
    .e-icons { 
        color: #00ffff; 
        font-size: 26px; 
    } 

    .e-search:before { 
        content: '\e724'; 
    } 

    .e-upload:before { 
        content: '\e769'; 
    } 

    .e-font:before { 
        content: '\e80e'; 
    } 
</style> 

Screenshot: 
 
 
Kindly try the above solution and let us know if you need further assistance. 

Regards, 
Balasubramanian S 


Marked as answer
Loader.
Up arrow icon