fix(paginator): first/last icons being thrown off on IE and Edge; sim…

…plify 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.
angular · Mar 5, 2018 · 85f9491 · 85f9491
1 parent 3074b45
commit 85f9491
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 70 deletions.
diff --git 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
@@ -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-range-actions {
+  display: flex;
+  align-items: center;
+  min-height: $mat-paginator-range-actions-min-height;
 }
 
-.mat-paginator-increment {
-  margin-left: $mat-paginator-button-increment-icon-margin;
-  [dir='rtl'] & {
-    margin-right: $mat-paginator-button-increment-icon-margin;
-  }
-}
+.mat-paginator-icon {
+  width: $mat-paginator-height / 2;
+  fill: currentColor;
 
-.mat-paginator-decrement {
-  margin-left: $mat-paginator-button-decrement-icon-margin;
   [dir='rtl'] & {
-    margin-right: $mat-paginator-button-decrement-icon-margin;
+    transform: rotate(180deg);
   }
 }
-
-.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;
-}