We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Icons not working

Thread ID:

Created:

Updated:

Platform:

Replies:

149058 Nov 12,2019 10:47 PM UTC May 21,2020 04:02 PM UTC ASP.NET MVC - EJ 2 20
loading
Tags: General
Rowan
Asked On November 12, 2019 10:47 PM UTC

Hello,

The icons appear correctly when using the material.css, however, when using the bootstrap4.css file, the styles work fine however the icons do not appear correctly. I have attached the styles created using Theme Studio

Attachment: bootstrap420191112223305689811948975_6c8663d8.zip

Gurunathan A [Syncfusion]
Replied On November 13, 2019 01:10 PM UTC

Hi Rowan, 
 
We have ensured the theme file generated using config and it’s working fine in our end, can you please share the component list and icon set which is not loading at your end.? 
 
Regards, 
Gurunathan  
 
 


Rowan
Replied On November 13, 2019 03:17 PM UTC

Hello, it is the DataGrid control and its related icons using the Bootstrap4 theme that is not working.

The CSS file is loaded in the BundleConfig:

bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/sb-admin-2.min.css",
                "~/content/toastr.min.css",
                "~/content/myportal.css",
                "~/content/fontawesome.min.css",
                "~/content/regular.min.css",
                "~/content/solid.min.css",
                "~/Content/brands.min.css",
                "~/Content/site.css",
                "~/Content/ej2/bootstrap4.css"));
And the scripts:
bundles.Add(new ScriptBundle("~/bundles/syncfusion").Include(
                "~/Scripts/ej2/ej2.min.js"));
These are then loaded in the _Layout.cshtml:
@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/syncfusion")


Gurunathan A [Syncfusion]
Replied On November 14, 2019 12:37 PM UTC

Hi Rowan,  
 
We checked your reported issue with the provided bootstrap4 theme file and suspect the reason for this is the theme file not downloaded properly from the Theme Studio. We have generated the bootstrap4 theme file based on your settings.json which you can find below,  
 
 
You can use this in your application to resolve the reported issue.  
 
We have also prepared a sample with this theme file for your reference. You can find it below,  
 
 
Let us know if you have any concerns.  
 
Regards, 
Gurunathan  



Rowan
Replied On November 14, 2019 12:52 PM UTC

Thank you very much! The icons now appear :)

Gurunathan A [Syncfusion]
Replied On November 14, 2019 01:17 PM UTC

Hi Rowan, 
  
Thanks for the udpate. 
  
Regards, 
Gurunathan 


Simon
Replied On January 21, 2020 01:46 PM UTC

Issue on Theme Studio not solved? It seems I have the same problem, just for Blazor and Material dark theme.

Jesus Arockia Sankaran S [Syncfusion]
Replied On January 22, 2020 01:35 PM UTC

Hi Simon, 
  
Sorry for the inconvenience. 
  
We have ensured the theme file generated using config and it’s working fine in our end, we ask you to share the component list and icon set which is not loading at your end. 
  
Please get back to us with required details and further queries if any. 
  
Regards, 
Jesus Arockia Sankaran S 


Simon
Replied On January 24, 2020 08:44 AM UTC

Nearly all icons between '\e600' and '\e9ff' from the material-icon-list are showing as square aka unknown symbol.
And all icons used by the component 'filemanager' falls into this part.
Is possible to generate a seperate font file instead embedded font?


Edit: when I decoded the base64 string I couldn't see for example the 'M_SingleUpArrow' (is the '\e651') in the font file.

Abdulaziz Alhussien
Replied On January 27, 2020 05:10 AM UTC

We have the same issue with material.css, all file manager icons not appearing. 
Did you manage to resolve it?

Jesus Arockia Sankaran S [Syncfusion]
Replied On January 27, 2020 11:23 AM UTC

Hi Simon/Abdulaziz, 

­­We have generated the material-dark and material theme file separately by selecting all our components with default properties from themestudio. You can find the downloaded material-dark theme and material theme file below. 



We have created a sample using file manager component and used the downloaded themes which are attached above. Your reported issue is not reproduced and all icons are properly loaded in our end. Could you please check again in our Theme Studio and revert us if the issue still persist? 

Also, please use these attached theme files in your application and let us know whether your issue is resolved or not. 

If you still facing this issue,  please share the information such as console error if occur, selected options or steps that you have done when downloading themes from Theme Studio. So that, it will be helpful to find your exact cause of this issue and provide the solution as soon as possible.  

Regards, 
Jesus Arockia Sankaran S 


Simon
Replied On January 27, 2020 12:06 PM UTC

The dark material theme from the zip here works. Thank you.

Jesus Arockia Sankaran S [Syncfusion]
Replied On January 27, 2020 01:09 PM UTC

Hi Simon, Thanks for your update.

Abdulaziz Alhussien
Replied On January 28, 2020 08:48 AM UTC

Thanks Jesus, my mistake the font family was overridden by another css class. I had to put 
 
.e-icons {
    font-family: "e-icons" !important;
}


Jesus Arockia Sankaran S [Syncfusion]
Replied On January 28, 2020 09:25 AM UTC

Hi Abdulaziz, we glad that your issue has been resolved now.  


Tichaona
Replied On May 8, 2020 02:17 AM UTC

There is definitely an icon issue with the theme generator. I generated a theme using bootstrap4 and icons are missing/incorrect on my Blazor data grid. Please see attached my settings file and a screenshot of the output I am getting. 

Attachment: MissingIcons_17f1c632.zip

Jesus Arockia Sankaran S [Syncfusion]
Replied On May 8, 2020 06:52 AM UTC

Hi Tichaona,  

Thank you for contacting Syncfusion support and sorry for the inconvenience caused.  

We have checked your query and we have already logged this issue “Icons malfunctions in bootstrap4 file generated from Theme Studio” as bug. We want to inform you that the solution for this will be available with our Volume 1, 2020 SP release scheduled in mid of May.  


Please get back to us if you need any further assistance on this. 

Regards, 
Jesus Arockia Sankaran S 


Tichaona
Replied On May 8, 2020 12:30 PM UTC

Thanks, Jesus

If possible can you generate the correct css file for me based on the settings file in my earlier post.

Regards,
Tich

Jesus Arockia Sankaran S [Syncfusion]
Replied On May 12, 2020 02:48 PM UTC

Hi Tichaona,  

We have resolved the issue in bootstrap 4 icon in theme file generated from Theme Studio and refreshed the live site.  


Please let us know if you need any further assistance on this. 

Regards, 
Jesus Arockia Sankaran S 


Simon
Replied On May 19, 2020 03:11 AM UTC

For material, material-dark and bootstrap-dark (not v4) the icons are broken on Theme Studio and in the downloaded .scss.

Jesus Arockia Sankaran S [Syncfusion]
Replied On May 21, 2020 04:02 PM UTC

Hi Simon,  

Sorry for the delay in getting back to you.  

We have checked your problem and we created a ASP.NET MVC sample with Calendar and Grid component in it but we are not able to reproduce the reported issue. You can download the sample for your reference from the below link.  


We have used both the CSS files from package and ThemeStudio as mentioned below.  

From Package Location 
ThemeStudio Generated CSS 

 
 


We request you to share the list of components, screen shot, video (screen capture), sample application for clear understanding if we misunderstood your problem.  

Please get back to us if you need any further assistance on this. 

Regards, 
Jesus Arockia Sankaran S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon