From dd082cbdd629446d522c6fd168e98b5eef3b9d1d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 1 Mar 2018 01:00:48 +0100
Subject: [PATCH] fix(paginator): first/last icons being thrown off on IE and
 Edge; simplify icon setup (#9776)

* Fixes the paginator icons being thrown off on IE and Edge.
* Simplifies the paginator's icon setup by using the SVG icons, rather than trying to construct them through CSS. Using SVGs has the advantage of requiring a lot less code, being more consistent across browsers and being easier to center vertically.
---
 src/lib/paginator/paginator.html | 18 +++++---
 src/lib/paginator/paginator.scss | 74 ++++----------------------------
 2 files changed, 21 insertions(+), 71 deletions(-)

diff --git a/src/lib/paginator/paginator.html b/src/lib/paginator/paginator.html
index 4d28fb721d4..ac935263382 100644
--- a/src/lib/paginator/paginator.html
+++ b/src/lib/paginator/paginator.html
@@ -33,8 +33,9 @@
             [matTooltipPosition]="'above'"
             [disabled]="!hasPreviousPage()"
             *ngIf="showFirstLastButtons">
-      <div class="mat-paginator-first"></div>
-      <div class="mat-paginator-decrement"></div>
+      <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
+      </svg>
     </button>
     <button mat-icon-button type="button"
             class="mat-paginator-navigation-previous"
@@ -43,7 +44,9 @@
             [matTooltip]="_intl.previousPageLabel"
             [matTooltipPosition]="'above'"
             [disabled]="!hasPreviousPage()">
-      <div class="mat-paginator-decrement"></div>
+      <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+      </svg>
     </button>
     <button mat-icon-button type="button"
             class="mat-paginator-navigation-next"
@@ -52,7 +55,9 @@
             [matTooltip]="_intl.nextPageLabel"
             [matTooltipPosition]="'above'"
             [disabled]="!hasNextPage()">
-      <div class="mat-paginator-increment"></div>
+      <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+      </svg>
     </button>
     <button mat-icon-button type="button"
             class="mat-paginator-navigation-last"
@@ -62,8 +67,9 @@
             [matTooltipPosition]="'above'"
             [disabled]="!hasNextPage()"
             *ngIf="showFirstLastButtons">
-      <div class="mat-paginator-increment"></div>
-      <div class="mat-paginator-last"></div>
+      <svg class="mat-paginator-icon" viewBox="0 0 24 24" focusable="false">
+        <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
+      </svg>
     </button>
   </div>
 </div>
diff --git a/src/lib/paginator/paginator.scss b/src/lib/paginator/paginator.scss
index 11a9bcc0556..6cafb8d9578 100644
--- a/src/lib/paginator/paginator.scss
+++ b/src/lib/paginator/paginator.scss
@@ -60,73 +60,17 @@ $mat-paginator-button-last-increment-icon-margin: 9px;
   margin: $mat-paginator-range-label-margin;
 }
 
-.mat-paginator-decrement-button + .mat-paginator-decrement-button {
-  margin: 0 0 0 $mat-paginator-button-margin;
-
-  [dir='rtl'] & {
-    margin: 0 $mat-paginator-button-margin 0 0;
-  }
-}
-
-.mat-paginator-decrement,
-.mat-paginator-increment {
-  width: $mat-paginator-button-icon-width;
-  height: $mat-paginator-button-icon-height;
-}
-
-.mat-paginator-increment,
-[dir='rtl'] .mat-paginator-decrement {
-  transform: rotate(45deg);
-}
-.mat-paginator-decrement,
-[dir='rtl'] .mat-paginator-increment {
-  transform: rotate(225deg);
-}
-
-.mat-paginator-increment {
-  margin-left: $mat-paginator-button-increment-icon-margin;
-  [dir='rtl'] & {
-    margin-right: $mat-paginator-button-increment-icon-margin;
-  }
-}
-
-.mat-paginator-decrement {
-  margin-left: $mat-paginator-button-decrement-icon-margin;
-  [dir='rtl'] & {
-    margin-right: $mat-paginator-button-decrement-icon-margin;
-  }
-}
-
-.mat-paginator-first {
-  transform: rotate(90deg);
-  width: $mat-paginator-button-first-last-icon-width;
-  height: $mat-paginator-button-icon-height;
-  float:left;
-  margin-left: $mat-paginator-button-first-icon-margin;
-}
-
-.mat-paginator-navigation-first {
-  .mat-paginator-decrement {
-    margin-left: $mat-paginator-button-first-decrement-icon-margin;
-  }
-}
-
-.mat-paginator-navigation-last {
-  .mat-paginator-increment {
-    float: left;
-    margin-left: $mat-paginator-button-last-increment-icon-margin;
-  }
-}
-
-.mat-paginator-last {
-  transform: rotate(90deg);
-  width: $mat-paginator-button-first-last-icon-width;
-  height: $mat-paginator-button-icon-height;
-  margin-left: $mat-paginator-button-last-icon-margin;
-}
-
 .mat-paginator-range-actions {
   display: flex;
   align-items: center;
   min-height: $mat-paginator-range-actions-min-height;
 }
+
+.mat-paginator-icon {
+  width: $mat-paginator-height / 2;
+  fill: currentColor;
+
+  [dir='rtl'] & {
+    transform: rotate(180deg);
+  }
+}