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

Try changing box sizing of icon container like so:

#google-signin-button * {
    box-sizing: content-box;
}

see: Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.