Google Sign-In Button Padding Issue in Angular 19 with Bootstrap 5.3.3

I'm trying to implement a Google Sign-In button in my Angular 19 project using Bootstrap 5.3.3. The button is supposed to display only the Google icon (no text), but I'm facing padding issues. The google icon is hidden and it was showing when remove the padding.

Here’s what I’ve tried so far:

• 
  Added the Google Identity Services script to index.html.
  
  
• 
  Configured the button using data-* attributes.
  

1. app.component.ts

import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';

declare var google: any;


@Component({
selector: 'app-root',
imports: [RouterModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class SignInComponent implements OnInit {
constructor() {

}

ngOnInit(): void {
this.initializeGoogleSignIn();

}

initializeGoogleSignIn(): void {
google.accounts.id.initialize({
client_id: 'GOOGLE_CLIENT_ID', // Replace with your Client ID
callback: (response: any) => this.handleGoogleSignIn(response)
});

google.accounts.id.renderButton(
document.getElementById('google-signin-button'),
{ theme: 'outline', size: 'large', type: 'icon', shape: 'circle', width: '40' } // Customize the button
);

google.accounts.id.prompt(); // Display the One Tap dialog
}

handleGoogleSignIn(response: any): void {
console.log('Google Sign-In Response:', response);
// Decode the JWT token to get user info
const decodedToken = JSON.parse(atob(response.credential.split('.')[1]));
console.log('Decoded Token:', decodedToken);
// Handle user data (e.g., store in state or send to backend)
}
}


2. app.component.html

<div class="mt-3">
<div id="google-signin-button"></div>
</div>


Here output

Continue reading...