1. Home
  2. Forum
  3. Blazor
  4. Icons not showing according to their content value

Icons not showing according to their content value

I've followed the instructions to use Bootstrap4 icons, but some icons do not show the correct picture according to the list in this link here
For example, in the styles show below, both e-circles display correctly but the e-orderedlist that is supposed to show the picture assigned to \e72c shows instead the one assigned to \e72f (TimeLineWeek)

// _Host.cshtml
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Application Manager</title>
    <base rel='nofollow' href="~/" />
    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />
    <link rel='nofollow' href="css/site.css" rel="stylesheet" />
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>

// Index.razor
<style>
    .e-icons {
        font-family: "e-icons";
    }

    .e-orderedlist::before {
        content: '\e72c';
    }

    .e-circle-close:before {
        content: '\e761';
    }
    .e-circle-add:before {
        content: '\e755';
    }
     .......
</style>    

.....
   <DropDownMenuItem Id="listAcctRemoteUsers" Text="List Remote Users" IconCss="e-icons e-orderedlist" />
   <DropDownMenuItem Id="addAcctRemoteUser" Text="Add Remote User" IconCss="e-icons e-circle-add" />
   <DropDownMenuItem Id="deleteAcctRemoteUser" Text="Delete Remote User" IconCss="e-icons e-circle-close" />
.....

11 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team August 5, 2020 07:41 AM UTC

Hi Ben, 
 
We have checked your reported query, we are unable to reproduce the reported issue in our end. For your reference we have prepared a sample, please refer below link. 
 
 
We have prepared a video demonstration based on this, please refer below link. 
 
 
If you are still facing the issue, kindly share the below details. 
 
  • If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Mohankumar R 


Marked as answer
BJ Ben Junior August 5, 2020 02:12 PM UTC

Hi Mohankuma,

Thanks for your feedback the problem is solved. It was actually on my side: before that code, there was a custom component that also had the same named style but with the wrong  content on it, thus the confusion.


MK Mohan Kumar Ramasamy Syncfusion Team August 6, 2020 05:29 AM UTC

Hi Ben,   
  
Thanks for the update.  
 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Mohankumar R 


AN Andrew September 4, 2020 03:19 PM UTC

I downloaded the sample project mentioned above, hit F5 and everything worked as it should. I then added two buttons to the form


and added the following to the styles block

   .e-close::before {
        content: '\e7fc';
    }

    .e-add-new::before {
        content: '\e823';
    }

The result was per the attached image

The e-close \e7fc displayed the icon for edit-06 \e7a3
the e-add-new \e823 displayed nothing at all.



Attachment: BlazorIcons_2a744d99.zip

AN Andrew September 4, 2020 03:35 PM UTC

If it helps, I have added an image of the generated html from F12 developer which shows the Base64 for both of the icons



Attachment: BlazorIcons_6cf19b0b.zip

AN Andrew September 4, 2020 04:00 PM UTC

Added four more buttons

<SfButton IconCss="e-icons e-cross-close"></SfButton>
<SfButton IconCss="e-icons e-plus"></SfButton>
<SfButton IconCss="e-icons e-close-01"></SfButton>
<SfButton IconCss="e-icons e-close-wf"></SfButton>

and the following styles

   .e-cross-close::before {
        content: '\e7e9';
    }
    .e-plus::before {
        content: '\e7f9';
    }
    .e-close-01::before {
        content: '\e825';
    }
    .e-close-wf::before {
        content: '\e7a7';
    }

None of them worked as expected - see image and code snippet

Attachment: BlazorIcons_1e947559.zip

MK Mohan Kumar Ramasamy Syncfusion Team September 7, 2020 01:32 PM UTC

Hi Andrew, 
 
We have checked your reported query, the icons e-add-new, e-close-01 are not available in Bootstrap4 theme, so it’s not displayed in your sample. The two icons are available in other theme. Please refer below code snippets. 
 
Code Snippets:  
 
@using Syncfusion.Blazor.Buttons 
 
<SfButton IconCss="e-icons e-close"></SfButton> 
<SfButton IconCss="e-icons e-add-new"></SfButton> 
<SfButton IconCss="e-icons e-cross-close"></SfButton> 
<SfButton IconCss="e-icons e-plus"></SfButton> 
<SfButton IconCss="e-icons e-close-01"></SfButton> 
<SfButton IconCss="e-icons e-close-wf"></SfButton> 
 
 
<style> 
    .e-icons { 
        font-family: "e-icons"; 
    } 
 
    .e-close::before { 
        content: '\e7fc'; 
    } 
 
    .e-add-new::before { 
        content: '\e759'; 
    } 
 
    .e-cross-close::before { 
        content: '\e7e9'; 
    } 
 
    .e-plus::before { 
        content: '\e7f9'; 
    } 
 
    .e-close-01::before { 
        content: '\e761'; 
    } 
 
    .e-close-wf::before { 
        content: '\e7a7'; 
    } 
</style>     
 
We have prepared sample based on this please refer below link. 
 
 
Query:  “The e-close \e7fc displayed the icon for edit-06 \e7a3”. 
 
We are unable to reproduce the reported issue in our end. We have prepared a video demonstration based on this, please refer below link.  
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


AN Andrew September 7, 2020 03:26 PM UTC

Hi Mohankumar

Thanks for your response. I have downloaded the sample and in the attached file I show what the result is when changing the css resource in the _Host.cshtml file.

In the bootstrap, material and fabric css resource the icons work as expected, if the icon is not available it shows as blank.

However, using Bootstrap4, if the icon is not available a totally unrelated icon is displayed - is this the intended outcome? If so, it should be explained in the documentation.

If I load both Bootstrap4 and Bootstrap css resources then I get all of the icons that I would expect.

Andrew

Attachment: BlazorIconComparison_148a88f3.zip

MK Mohan Kumar Ramasamy Syncfusion Team September 8, 2020 06:19 AM UTC

Hi Andrew, 
 
We have checked your reported documentation. Generally, icons will be displayed based on the theme. When we refer more than one theme conflicts will occur in CSS style and icons. So it is advisable to refer one theme in a sample. 
 
 
 
 
 
 
Please let us know if you need further assistance on this.  
 
Regards, 
Mohankumar R 


AN Andrew September 8, 2020 06:46 AM UTC

Thanks, I now have it straight in my head!

MK Mohan Kumar Ramasamy Syncfusion Team September 9, 2020 09:33 AM UTC

Hi Andrew,   
  
Thanks for the update.  
 
We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Mohankumar R 


Loader.
Up arrow icon