diff --git a/src/app/components/toggle/toggle.component.html b/src/app/components/toggle/toggle.component.html index 08a9cb814decdb1fbf50ba5b3347e445d0f2175b..ae728a9a486b8d586854a89c8019b45d4e2f84b0 100644 --- a/src/app/components/toggle/toggle.component.html +++ b/src/app/components/toggle/toggle.component.html @@ -2,7 +2,7 @@ <p class="control has-tooltip"> <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOn" [class.is-primary]="value" (click)="toggle(true)"> <span class="icon is-small"> - <i class="fa {{icon}}"></i> + <i class="fa {{iconOn}}"></i> </span> <span>{{textOn}}</span> </button> @@ -10,6 +10,9 @@ <p class="control"> <button class="button is-rounded has-tooltip" [attr.data-tooltip]="tooltipOff" [class.is-primary]="!value" (click)="toggle(false)"> <span>{{textOff}}</span> + <span *ngIf="iconOff" class="icon is-small"> + <i class="fa {{iconOff}}"></i> + </span> </button> </p> </div> diff --git a/src/app/components/toggle/toggle.component.ts b/src/app/components/toggle/toggle.component.ts index 5c3444e9b154e32041da3cd96d5843abe4301d05..555e10dd532318348b1df71a7286eb68d2bd7030 100644 --- a/src/app/components/toggle/toggle.component.ts +++ b/src/app/components/toggle/toggle.component.ts @@ -7,7 +7,8 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; }) export class ToggleComponent implements OnInit { - @Input() icon = 'fa-check'; + @Input() iconOn = 'fa-check'; + @Input() iconOff = 'fa-times'; @Input() textOn = 'On'; @Input() textOff = 'Off'; diff --git a/src/styles.scss b/src/styles.scss index e539e5fccb84f12bd7bd4301fbff44c981e3c901..d59245a80576d72b9169262de1efa58f92851324 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -177,6 +177,10 @@ div.field.has-addons.add-remove-toggle { color: $danger; } +.fa-times { + color: $danger; +} + .footer-buttons { margin-left: 20px; margin-right: 10px;