MOBILE-2914 icon: Slash parameter

src/components/icon/icon.scss

@@ -14,3 +14,42 @@
       transform: scale(-1, 1);
     }
 }
+
+// Center font awesome icons
+
+.icon.fa::before {
+  width: 1em;
+  text-align: center;
+}
+
+// Slash
+
+@font-face {
+  font-family: "Moodle Slash Icon";
+  font-style: normal;
+  font-weight: 400;
+  src: url("#{$font-path}/slash-icon.woff") format("woff");
+}
+
+.icon-slash {
+  position: relative;
+}
+
+.icon-slash::after {
+  content: "/";
+  font-family: "Moodle Slash Icon";
+  font-size: 0.75em;
+  margin-top: 0.125em;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: color($colors, danger);
+}
+
+.icon-slash.fa::after {
+  font-size: 1em;
+  margin-top: 0;
+}

src/components/icon/icon.ts

@@ -29,6 +29,7 @@ export class CoreIconComponent implements OnInit, OnDestroy {
     // Common params.
     @Input() name: string;
     @Input('color') color?: string;
+    @Input('slash') slash?: boolean; // Display a red slash over the icon.
 
     // Ionicons params.
     @Input('isActive') isActive?: boolean;
@@ -94,6 +95,10 @@ export class CoreIconComponent implements OnInit, OnDestroy {
             }
         }
 
+        if (this.slash) {
+            this.newElement.classList.add('icon-slash');
+        }
+
         this.element.parentElement.replaceChild(this.newElement, this.element);
     }