chore(docs): make octocat image usable as a Material Icon

DethAriel · Dec 3, 2022 · f710044 · f710044
1 parent 519c03a
commit f710044
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/projects/demo/src/app/demo-wrapper/demo-wrapper.component.html b/projects/demo/src/app/demo-wrapper/demo-wrapper.component.html
@@ -27,8 +27,10 @@
           </mat-list>
         </mat-radio-group>
       </mat-menu>
+
       <a *ngIf="!mobileQuery.matches" mat-button href="https://github.com/DethAriel/ng2-recaptcha">
-        <img src="images/octocat.svg" height="26px" style="margin-right: 8px" />
+        <!-- TODO: misalignment exists in Material buttons with custom icons -->
+        <mat-icon style="line-height: 1" svgIcon="octocat"></mat-icon>
         <span>GitHub</span>
       </a>
       <a
@@ -37,7 +39,7 @@
         mat-icon-button
         href="https://github.com/DethAriel/ng2-recaptcha"
       >
-        <img src="images/octocat.svg" height="26px" />
+        <mat-icon svgIcon="octocat"></mat-icon>
       </a>
     </mat-toolbar-row>
   </mat-toolbar>

diff --git a/projects/demo/src/app/demo-wrapper/demo-wrapper.component.ts b/projects/demo/src/app/demo-wrapper/demo-wrapper.component.ts
@@ -1,7 +1,9 @@
 import { MediaMatcher } from "@angular/cdk/layout";
 import { ChangeDetectorRef, Component, Inject, InjectionToken, OnDestroy, OnInit, VERSION } from "@angular/core";
-import { Title } from "@angular/platform-browser";
+import { Title, DomSanitizer } from "@angular/platform-browser";
 import { Router, ResolveEnd, ActivatedRouteSnapshot, Data } from "@angular/router";
+import { MatIconRegistry } from "@angular/material/icon";
+
 import { parse, stringify } from "query-string";
 
 import { parseLangFromHref } from "../parse-lang-from-href";
@@ -59,10 +61,13 @@ export class DemoWrapperComponent implements OnInit, OnDestroy {
     media: MediaMatcher,
     changeDetectorRef: ChangeDetectorRef,
     private router: Router,
+    private matIconRegistry: MatIconRegistry,
+    private domSanitizer: DomSanitizer,
   ) {
     this.mobileQuery = media.matchMedia("(max-width: 600px)");
     this.mobileQueryListener = () => changeDetectorRef.detectChanges();
     this.mobileQuery.addListener(this.mobileQueryListener);
+    this.matIconRegistry.addSvgIcon(`octocat`, this.domSanitizer.bypassSecurityTrustResourceUrl(`images/octocat.svg`));
   }
 
   public ngOnInit(): void {

diff --git a/projects/demo/src/app/demo-wrapper/demo-wrapper.module.ts b/projects/demo/src/app/demo-wrapper/demo-wrapper.module.ts
@@ -1,5 +1,6 @@
 import { LayoutModule } from "@angular/cdk/layout";
 import { NgModule } from "@angular/core";
+import { HttpClientModule } from "@angular/common/http";
 import { BrowserModule } from "@angular/platform-browser";
 
 import { MatButtonModule } from "@angular/material/button";
@@ -38,6 +39,7 @@ import { DemoWrapperRoutingModule } from "./demo-wrapper-routing.module";
     MatRadioModule,
     LayoutModule,
     DemoWrapperRoutingModule,
+    HttpClientModule,
   ],
   exports: [DemoWrapperComponent],
   providers: [{ provide: NAV_LINKS, useValue: navLinks }],