diff --git a/src/assets/fonts/slash-icon.woff b/src/assets/fonts/slash-icon.woff new file mode 100644 index 000000000..5e02178e4 Binary files /dev/null and b/src/assets/fonts/slash-icon.woff differ diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index bacc56f37..f909e876e 100644 --- a/src/components/icon/icon.scss +++ b/src/components/icon/icon.scss @@ -13,4 +13,43 @@ -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } -} \ No newline at end of file +} + +// 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; +} diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 4bf697b05..bfedf4001 100644 --- a/src/components/icon/icon.ts +++ b/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); }