<smart-dialog
    [title]="loginError || generalError ? (loginError ? errorTitle : generalErrorTitle) : title"
    [templateRef]="dialogTemplate"
    submit-on-enter="login"
    hideCloseButton="true"
    [width]="460"
    [buttons]="buttons">
</smart-dialog>
<ng-template #dialogTemplate>
            <form class="k-form-inline">
                <label class="k-form-field">
                    <span>Username</span>
                    <input #usernameInput class="k-textbox" type="text" name="username" [(ngModel)]="userName"/>
                </label>
                <label class="k-form-field">
                    <span>Password</span>
                    <input #passwordInput class="k-textbox" type="password" name="password" [(ngModel)]="password"/>
                </label>
                <label class="k-form-field oidc-services-wrap" *ngIf="oidcServices">
                    <span>Or sign in with:</span>
                    <button class="k-button oidc-service-button" *ngFor="let svc of oidcServices" (click)="oidcLogin(svc)">
                        <span *ngIf="svc.icon" [class]="'oidc-service-icon'">
                            <i *ngIf="svc.iconClass" [class]="svc.iconClass"></i>
                            <img class="oidc-service-icon-img" *ngIf="!svc.iconClass && svc.iconResourceURL" [src]="svc.iconResourceURL">
                        </span>
                        {{svc.name}}
                    </button>
                </label>
            </form>
</ng-template>

./smart-login.component.css

::ng-deep .k-button {
    text-transform: uppercase;
}

::ng-deep .oidc-service-icon-img {
    max-height: 25px;
    margin-right: 1rem;
}