From 919ef66a7c40fad1b803fbcd673aee3ae031bc73 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 27 Nov 2018 16:26:24 +0200
Subject: [PATCH] build(docs-infra): remove dependency on FontAwesome (#27250)

We were only using two FontAwesome icons (`link` and `twitter`). The
twitter icon is already available as an SVG (used in the topbar) and a
similar link icon is available via 'Material Icons', which we are
already brining in.

This commit removes the dependency on FontAwesome and uses the available
icons instead.

_Before:_
![contributor-info-before](https://user-images.githubusercontent.com/8604205/49089076-61b90680-f263-11e8-8c5f-c52d332e6e64.png)

_After:_
![contributor-info-after](https://user-images.githubusercontent.com/8604205/49089075-61b90680-f263-11e8-9785-b8df15aaacd3.png)

PR Close #27250
---
 aio/ngsw-config.json                                 |  3 +--
 .../contributor/contributor-list.module.ts           |  3 ++-
 .../contributor/contributor.component.ts             | 10 +++++-----
 aio/src/index.html                                   |  1 -
 aio/src/styles/2-modules/_contributor.scss           | 12 +++++++++---
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/aio/ngsw-config.json b/aio/ngsw-config.json
index 90b0ad2d04..95386ea0a5 100644
--- a/aio/ngsw-config.json
+++ b/aio/ngsw-config.json
@@ -18,8 +18,7 @@
         ],
         "urls": [
           "https://fonts.googleapis.com/**",
-          "https://fonts.gstatic.com/s/**",
-          "https://maxcdn.bootstrapcdn.com/**"
+          "https://fonts.gstatic.com/s/**"
         ]
       }
     }, {
diff --git a/aio/src/app/custom-elements/contributor/contributor-list.module.ts b/aio/src/app/custom-elements/contributor/contributor-list.module.ts
index d404fae9f4..1bc262a2fb 100644
--- a/aio/src/app/custom-elements/contributor/contributor-list.module.ts
+++ b/aio/src/app/custom-elements/contributor/contributor-list.module.ts
@@ -1,12 +1,13 @@
 import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
 import { ContributorListComponent } from './contributor-list.component';
 import { ContributorService } from './contributor.service';
 import { ContributorComponent } from './contributor.component';
 import { WithCustomElementComponent } from '../element-registry';
 
 @NgModule({
-  imports: [ CommonModule ],
+  imports: [ CommonModule, MatIconModule ],
   declarations: [ ContributorListComponent, ContributorComponent ],
   entryComponents: [ ContributorListComponent ],
   providers: [ ContributorService ]
diff --git a/aio/src/app/custom-elements/contributor/contributor.component.ts b/aio/src/app/custom-elements/contributor/contributor.component.ts
index 710d797b6c..cf73eba499 100644
--- a/aio/src/app/custom-elements/contributor/contributor.component.ts
+++ b/aio/src/app/custom-elements/contributor/contributor.component.ts
@@ -13,16 +13,16 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
 
             <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
                 <div class="contributor-info">
-                    <a *ngIf="person.bio" mat-button>
+                    <a *ngIf="person.bio" mat-button class="info-item">
                         View Bio
                     </a>
-                    <a *ngIf="person.twitter" mat-button class="icon"
+                    <a *ngIf="person.twitter" mat-icon-button class="info-item icon"
                         href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()">
-                        <span class="fa fa-twitter fa-2x"></span>
+                        <mat-icon svgIcon="logos:twitter"></mat-icon>
                     </a>
-                    <a *ngIf="person.website" mat-button class="icon"
+                    <a *ngIf="person.website" mat-icon-button class="info-item icon"
                         href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()">
-                        <span class="fa fa-link fa-2x"></span>
+                        <mat-icon class="link-icon">link</mat-icon>
                     </a>
                 </div>
             </div>
diff --git a/aio/src/index.html b/aio/src/index.html
index 2fb27da8e7..43c59b416f 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -24,7 +24,6 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <!-- -->
 
   <link rel="manifest" href="pwa-manifest.json">
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index 5da49b58d4..c31d20230c 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -70,7 +70,7 @@ aio-contributor {
     @media (hover) { opacity: 0; }
     border-radius: 50%;
 
-    [mat-button] {
+    .info-item {
       color: $white;
       font-size: 14px;
       font-weight: 500;
@@ -85,8 +85,14 @@ aio-contributor {
         min-width: 20px;
         width: 20px;
 
-        .fa-2x {
-          font-size: 20px;
+        mat-icon {
+          height: 20px;
+          width: 20px;
+
+          &.link-icon {
+            margin-top: -7px;
+            transform: rotateZ(45deg);
+          }
         }
       }
     }