Icons - do we really have to create our own CSS?

[Darryl Luther]

From the examples in the documentation, I see that in order to use an icon like this: <span class="e-icons e-search"></span> I need to create the .e-search class in my CSS as:

.e-search:before {

    content: '\e724';

}

Is there really no CSS provided that has all of these defined for us so we don't have to go through and manually create these classes for icons? It's tedious trying to first find the icon here: https://blazor.syncfusion.com/documentation/appearance/icons/#bootstrap-4 (which are not listed in alphabetically or really in any kind of order at all) and then create the class and then use it.

[Darryl Luther]

I wrote a quick little app to screen scrape the icon codes and display them next to the names used at https://blazor.syncfusion.com/documentation/appearance/icons/#bootstrap-4. I've found a few issues with the icons:

1. \e7ef and \e7f4 are using the same image. The former is CellAlignLeft and that is the correct image. The latter is CellAlignCenter, but the image is for CellAlignLeft.
2. \e7be has a large area of whitespace on the right side of the image causing it to appear strangely when used.
3. \e763 which should be the grid image instead simply displays an empty white box with a large area of whitespace on the right.

I am using the following stylesheet link my _Host.cshtml file which is producing the above noted items: _content/Syncfusion.Blazor/styles/bootstrap4.css

[Jesus Arockia Sankaran S]

Hi Darryl, 

Sorry for the inconvenience.  

We checked your query and we want to inform you that we do not provide any predefined classes for the icons since it can be given custom class name with respect to application design. We can give “custom-search” instead “e-search”. 

Also, we would like to know that we have forwarded the queries about the icon design to corresponding team and get back to you with further details as soon as possible. 

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

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Darryl, 

Sorry for the delay in getting back to you.  

We have checked your concerns regarding the icons and we are not able to understand your point clearly for the Calendar and Grid icon mentioned in point 2 & 3. So, we have request you to share more details such as a visual representation image for better understanding.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSyncIcon0727-1534595698 

Also, we want to inform you that we can understand your concern about the cell align center and left icons and will update you the further details as earlier as possible. 

Please get back to us with requested details and further query if any. 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Darryl, 

Thank you for waiting for our response.  

We will remove the mistakenly included center icon in our upcoming release. 

Please get back to us if you have any other queries.  

Regards, 

Jesus Arockia Sankaran S 

[Darryl Luther]

I have attached screen caps of the two icons that don't seem to appear properly. One is the "calendar" icon using "\e7be" value and the other is the "grid" icon using "\e763" value. There is a strange empty space to the right of the calendar icon and the grid icon shows up as a small box with the same strange empty space to the right.

Attachment: icons_7cf66073.zip

[Darryl Luther]

Hi Darryl, 

Thank you for waiting for our response.  

We will remove the mistakenly included center icon in our upcoming release. 

Please get back to us if you have any other queries.  

Regards, 

Jesus Arockia Sankaran S 

I don't think you should remove the center icon, but replace it with one that is more appropriate. Much like the center text icon on the toolbar of this text editor I'm using to reply to the post.

[Jesus Arockia Sankaran S]

Hi Darryl, 

Sorry for the inconvenience.  

We will update the modified icon for center align for bootstrap4 theme and we expect that it will be available in the end of August with second patch release after Volume 2, 2020 SP. 

Please let us know if you have any queries.  

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Darryl, 

Sorry for the inconvenience.  

We are not able to update the center align icon promised and we expect that it will be available with any of our weekly patch release scheduled in September. We will intimate you once it is completed. 

Please let us know if you have any queries. 

Regards, 

Jesus Arockia Sankaran S 

[Muthukumar Kannan]

Hi Darryl, 

  

We deeply regret the delayed update.

We have resolved the CellAlignCentre bootstrap4 icon issue in the latest NuGet package. So, could you please upgrade the Syncfusion.Blazor latest NuGet package.

Also, we have prepared a sample for your reference.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazoricon-1788683403

Please check the above details and get back to us if you are still facing the same issue.

Regards,

Muthukumar K