fix(alert): add checkbox icon for iOS using Sass variables from regular checkbox

Closes #5253

Author: brandyscarney

ionic/components/alert/alert.ios.scss

@@ -1,5 +1,6 @@
 @import "../../globals.ios";
 @import "./alert";
+@import "../checkbox/checkbox.ios";
 
 // iOS Alerts
 // --------------------------------------------------
@@ -37,6 +38,18 @@ $alert-ios-button-border-radius:                0 !default;
 $alert-ios-button-border-color:                 #c8c7cc !default;
 $alert-ios-button-activated-background-color:   #e9e9e9 !default;
 
+$alert-checkbox-ios-icon-size:                  $checkbox-ios-icon-size !default;
+$alert-checkbox-ios-icon-border-radius:         $checkbox-ios-icon-border-radius !default;
+$alert-checkbox-ios-icon-border-width:          $checkbox-ios-icon-border-width !default;
+$alert-checkbox-ios-icon-border-style:          $checkbox-ios-icon-border-style !default;
+$alert-checkbox-ios-icon-border-color-off:      $checkbox-ios-icon-border-color-off !default;
+$alert-checkbox-ios-icon-border-color-on:       $checkbox-ios-icon-border-color-on !default;
+$alert-checkbox-ios-background-color-off:       $checkbox-ios-background-color-off !default;
+$alert-checkbox-ios-background-color-on:        $checkbox-ios-background-color-on !default;
+$alert-checkbox-ios-icon-checkmark-width:       $checkbox-ios-icon-checkmark-width !default;
+$alert-checkbox-ios-icon-checkmark-style:       $checkbox-ios-icon-checkmark-style !default;
+$alert-checkbox-ios-icon-checkmark-color:       $checkbox-ios-icon-checkmark-color !default;
+
 
 ion-alert {
   background: $alert-ios-background;
@@ -164,6 +177,37 @@ ion-alert {
   white-space: nowrap;
 }
 
+.alert-checkbox-icon {
+  margin: 10px 6px 10px 16px;
+  position: relative;
+  width: $alert-checkbox-ios-icon-size;
+  height: $alert-checkbox-ios-icon-size;
+  border-radius: $alert-checkbox-ios-icon-border-radius;
+  border-width: $alert-checkbox-ios-icon-border-width;
+  border-style: $alert-checkbox-ios-icon-border-style;
+  border-color: $alert-checkbox-ios-icon-border-color-off;
+  background-color: $alert-checkbox-ios-background-color-off;
+}
+
+.alert-checkbox[aria-checked=true] .alert-checkbox-icon {
+  background-color: $alert-checkbox-ios-background-color-on;
+  border-color: $alert-checkbox-ios-icon-border-color-on;
+
+  .alert-checkbox-inner {
+    position: absolute;
+    border-width: $alert-checkbox-ios-icon-checkmark-width;
+    border-style: $alert-checkbox-ios-icon-checkmark-style;
+    border-color: $alert-checkbox-ios-icon-checkmark-color;
+    top: 4px;
+    left: 7px;
+    width: 4px;
+    height: 9px;
+    border-left: none;
+    border-top: none;
+    transform: rotate(45deg);
+  }
+}
+
 
 // iOS Alert Button
 // --------------------------------------------------

ionic/components/alert/alert.ts

@@ -260,7 +260,7 @@ export class Alert extends ViewController {
         '<template ngSwitchWhen="checkbox">' +
           '<div class="alert-checkbox-group">' +
             '<div *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" tappable role="checkbox">' +
-              '<div class="alert-checkbox-icon"></div>' +
+              '<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
               '<div class="alert-checkbox-label">' +
                 '{{i.label}}' +
               '</div>' +