1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Icons not working

Icons not working

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

22 Replies
GA Gurunathan A Syncfusion Team 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  
 
 


RO Rowan 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")


GA Gurunathan A Syncfusion Team 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  



RO Rowan November 14, 2019 12:52 PM UTC

Thank you very much! The icons now appear :)

GA Gurunathan A Syncfusion Team November 14, 2019 01:17 PM UTC

Hi Rowan, 
  
Thanks for the udpate. 
  
Regards, 
Gurunathan 


SI Simon 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.

JA Jesus Arockia Sankaran S Syncfusion Team 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 


SI Simon 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.

AA Abdulaziz Alhussien 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?

JA Jesus Arockia Sankaran S Syncfusion Team 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 


SI Simon January 27, 2020 12:06 PM UTC

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

JA Jesus Arockia Sankaran S Syncfusion Team January 27, 2020 01:09 PM UTC

Hi Simon, Thanks for your update.

AA Abdulaziz Alhussien 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;
}


JA Jesus Arockia Sankaran S Syncfusion Team January 28, 2020 09:25 AM UTC

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


TI Tichaona 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

JA Jesus Arockia Sankaran S Syncfusion Team 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 


TI Tichaona 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

JA Jesus Arockia Sankaran S Syncfusion Team 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 


SI Simon 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.

JA Jesus Arockia Sankaran S Syncfusion Team 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 


MI Mike November 10, 2021 07:17 PM UTC

I used Theme Studio and "lost" my search icon.  (The icon worked with the default tailwind.css, but didn't work when I made a customized css for tailwind with Theme Studio.)


The solution for me was to add this to my site.css:


.e-icons.e-search:before {
    content: "\e737";
}


Hope this helps anyone stuck on the same issue. :)


JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team November 11, 2021 06:55 AM UTC

Hi Mike, 
 
Thanks for contacting Syncfusion Support. 
 
We have validated the reported issue for “ search icon not appearing when downloaded theme from theme studio” at our end. Unfortunately, we are unable to replicate the issue at our end. We have downloaded tailwind css from theme studio and referred in the project and added search icon in the index.cshtml page and the icon is shown in the browser.  We have prepared a sample for you reference which you can download from the below link 
 
 
Image: 
 
For more details regarding icons, please refer the below UG 
 
 
Kindly try with the above information and get back to us if you have any queries. 
 
Regards, 
Joshna L 
 


Loader.
Up arrow icon