Icons on buttons

[horacioj]

At https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=tailwind I see examples referring to icons such as "IconCss="e-btn-sb-icons e-open-icon"", "IconCss="e-btn-sb-icons e-add-icon"", etc.

These buttons are defined inline as:

@@font-face {

        font-family: 'button-icons';

        src: url(data:application/x-......

and

 .e-open-icon::before {

        content: '\e70d';

    }

    .e-add-icon::before {

        content: '\e70a';

    }​

etc.

Is this the proper way to have buttons with icons? Where is this font-face coming from? 

Where can I see the available icons and how to render them?

Is this related somehow to https://blazor.syncfusion.com/documentation/appearance/icons#tailwind-css and/or https://blazor.syncfusion.com/documentation/appearance/icons? 

Is this solution from 2019 (https://www.syncfusion.com/forums/149716/i-cant-show-any-icon-on-buttons) still valid?

I found this very confusing... 

Are these icons provided by Syncfusion? 

is there somewhere (URL) were I can see the available icons and their names? Or should I define everything by hand?

Or should I import some icon library from somewhere else? Or should I use open-iconic?

Thanks!

[YuvanShankar Arunagiri]

Hi horacioj,

We have validated your reported query and please refer the below code snippet for proper way to refer the icon to button component.

@using Syncfusion.Blazor.Buttons

 

<SfButton IconCss="e-icons e-play-icon" IconPosition="IconPosition.Right">PLAY</SfButton>

<SfButton IconCss="e-icons e-pause-icon">PAUSE</SfButton>

 

<style>

    .e-play-icon::before {

        content: '\e324';

    }

 

    .e-pause-icon::before {

        content: '\e326';

    }

</style>

The above the mentioned e-icons was class name for icon which was refer from the Syncfusion theme link refer the UG link https://blazor.syncfusion.com/documentation/appearance/themes#reference-themes-in-blazor-application

And the above-mentioned content code was dependencies on theme. If we use play icon in material theme, then you need to check the content code in material theme icon library, please refer the UG link https://blazor.syncfusion.com/documentation/appearance/icons#material

then, you need to ensure your referring the material theme studio in your project like below.

For VS 2019, in _Host.cshtml file

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/20.2.43/styles/material.css" rel="stylesheet" />

For VS 2022, in _Layout.cshtml file

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/20.2.43/styles/material.css" rel="stylesheet" />

Could you please check the above process and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[horacioj]

Thank you for your reply. It works, but the icons set seems to be very limited. For example, at https://blazor.syncfusion.com/documentation/appearance/icons#tailwind-css  I could not find classic icons (typically needed) such as "person"  "email" (envelope), "phone", etc.

[YuvanShankar Arunagiri]

Hi horacioj,

We need to validate more on the reported query, so will update you the further details on or before August 19^th, 2022. And already we have person icon in our tailwind theme icon library. Please refer the below screenshot for below UG link.

UG link: https://blazor.syncfusion.com/documentation/appearance/icons#tailwind-css

Regards,

YuvanShankar A

[horacioj]

Should I use something like font awesome? The possible problem I see is the inconsistency of the icons look in case I use Syncfusion's built-in icons for some reason (e.g. the SfIcon, etc.).

What is your recommendation? 

Thanks

[YuvanShankar Arunagiri]

Hi Horacioj,

We have validated your reported query and prepared the sample using the font awesome icon(https://www.w3schools.com/icons/fontawesome_icons_intro.asp). Please refer the code snippet.

[For VS 2019, in _Host.cshtml file/ For VS 2022, in _Layout.cshtml file]:

<link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

[Index.razor]:

@using Syncfusion.Blazor.Buttons

<SfButton Content="Edit" IconCss="fa fa-car"></SfButton>

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[CharlesG]

I also found this very confusing.

What I ended up doing was wrapping the button around my content, including image.  Problem solved.

<SfButton>
      <img src="/images/download.png" />
      <span>Download</span>
</SfButton>

[YuvanShankar Arunagiri]

Hi Charles,

Thanks for your update. Your provided solution also works as well as in our last update. We have considered the html content within the button component as child content and loaded it within the button.

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_ChildContent

Regards,

YuvanShankar A