Can you please guide me about how to display facebook and google icon?

[Harshal]

Can you please guide me about how to display facebook and google icon?

I am not able to see any icon in the ui..

@page "/"

<div id="wrapper">

    <SfCard>

        <CardHeader Title="Sign In"

                    SubTitle="Hey,Please select sign in options from below to continue"></CardHeader>

        <form id="external-account" asp-page="./ExternalLogin" method="post" class="form-horizontal">

            <div>

                    <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">

                        <SfButton CssClass="e-danger" IconCss="e-icons e-Google">Sign in with Google</SfButton>

                    </div>

                    <br />

               

                    <div>

                        <SfButton CssClass="e-info" IconCss="e-icons e-facebook">Sign in with Facebook</SfButton>

                        <SfButton IconCss="e-icons e-Google">Facebook</SfButton>

                    </div>

                    <br/>

            </div>

        </form>

    </SfCard>

</div>

<style>

    #wrapper {

        text-align: center;

        width: 500px;

        margin-top: 150px;

        margin-left: 350px;

    }

</style>

@code {

}

[Gayathri KarunaiAnandam]

Hi Harshal, 

Thanks for contacting Syncfusion Support. 

We have checked your reported query. We would like to let you know that we can add external style reference to button by using the IconCss property. We have prepared a sample by using Facebook and Google icons in Button component. Please check the below code snippet. 

Index.html: 

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 

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

Index.razor: 

    <SfCard> 

 

        <CardHeader Title="Sign In" 

 

                    SubTitle="Hey,Please select sign in options from below to continue"></CardHeader> 

 

        <form id="external-account" asp-page="./ExternalLogin" method="post" class="form-horizontal"> 

 

            <div> 

 

                    <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12"> 

 

                        <SfButton CssClass="e-danger" IconCss="fa fa-google">Sign in with Google</SfButton> 

 

                    </div> 

 

                    <br /> 

 

                    <div> 

 

                        <SfButton CssClass="e-info" IconCss="fa fa-facebook-official">Sign in with Facebook</SfButton> 

 

                        <SfButton IconCss="fa fa-facebook-official">Facebook</SfButton> 

 

                    </div> 

 

                    <br/> 

 

            </div> 

 

        </form> 

 

    </SfCard> 

For your convenience, please check the below sample link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Client_Btn-609869770 

To know more details, please check the below links. 

https://blazor.syncfusion.com/documentation/button/getting-started 

https://blazor.syncfusion.com/documentation/appearance/icons#icon-integration-with-button-component 

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

Regards, 

Gayathri K