Skip to content

added google icon #2912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 14, 2025
Merged

added google icon #2912

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e682a3
added google icon
imolorhe Oct 13, 2025
e5164b3
updated snapshot
imolorhe Oct 13, 2025
7c0f93e
fix lint
imolorhe Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...altair-app/src/app/modules/altair/components/account-dialog/account-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ <h2>Login to get started</h2>
class="btn btn--bordered"
(click)="submitLogin('GOOGLE')"
>
<!-- <app-icon name="google"></app-icon> -->
<app-icon [svg]="googleIcon"></app-icon>
{{ 'SIGNIN_WITH_GOOGLE' | translate }}
</button>
<button
Expand Down
15 changes: 14 additions & 1 deletion ...s/altair-app/src/app/modules/altair/components/account-dialog/account-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import {
ChangeDetectionStrategy,
Component,
input,
output
output,
inject,
} from '@angular/core';
import { AccountState } from 'altair-graphql-core/build/types/state/account.interfaces';
import { apiClient } from '../../services/api/api.service';
import { externalLink } from '../../utils';
import { IdentityProvider } from '@altairgraphql/db';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
selector: 'app-account-dialog',
Expand All @@ -23,6 +25,17 @@ export class AccountDialogComponent {
readonly handleLoginChange = output<IdentityProvider>();
readonly logoutChange = output();

googleIcon: SafeHtml;
private sanitizer = inject(DomSanitizer);

constructor() {
const googleSvg = `<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" fill="currentColor">
<path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z"/>
</svg>`;
this.googleIcon = this.sanitizer.bypassSecurityTrustHtml(googleSvg);
Comment on lines +32 to +36
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

For better maintainability and separation of concerns, it's recommended to move large, hardcoded strings like this SVG markup into a separate constants file. This keeps the component logic clean and makes the SVG reusable if needed elsewhere.

You could create a file like icons.ts within this component's directory and export the SVG string as a constant:

.../account-dialog/icons.ts

export const GOOGLE_ICON_SVG = `<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" fill="currentColor">
  <path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z"/>
</svg>`;

Then you can import GOOGLE_ICON_SVG in your component and use it like this:

const googleSvg = GOOGLE_ICON_SVG;
this.googleIcon = this.sanitizer.bypassSecurityTrustHtml(googleSvg);

}

submitLogin(provider: IdentityProvider = IdentityProvider.GOOGLE) {
this.handleLoginChange.emit(provider);
}
Expand Down
Loading