clr-angular-static-fix/modal/modal.html

1. Install Clarity Icons package through npm:

<!--
  ~ Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
  ~ This software is released under MIT license.
  ~ The full license information can be found in LICENSE in the root directory of this project.
  -->

<div clrFocusTrap class="modal" *ngIf="_open">
    <!--fixme: revisit when ngClass works with exit animation-->
    <div [@fadeDown]="skipAnimation" (@fadeDown.done)="fadeDone($event)"
         class="modal-dialog"
         [class.modal-sm]="size == 'sm'"
         [class.modal-lg]="size == 'lg'"
         [class.modal-xl]="size == 'xl'"
         role="dialog" [attr.aria-hidden]="!_open">

        <div class="modal-outer-wrapper">
            <div class="modal-content-wrapper">
                <!-- only used in wizards -->
                <ng-content select=".modal-nav"></ng-content>

                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-label="Close"
                                *ngIf="closable" (click)="close()">
                            <clr-icon aria-hidden="true" shape="close"></clr-icon>
                        </button>
                        <ng-content select=".modal-title"></ng-content>
                    </div>
                    <ng-content select=".modal-body"></ng-content>
                    <ng-content select=".modal-footer"></ng-content>
                </div>
            </div>
            <!--todo: deprecate the modal-ghost-wrapper div below after 0.12-->
            <div class="modal-ghost-wrapper">
                <div [@ghostPageOneState]="ghostPageState" class="modal-ghost modal-ghost-1"></div>
                <div [@ghostPageTwoState]="ghostPageState" class="modal-ghost modal-ghost-2"></div>
            </div>
        </div>
    </div>

    <div [@fade] class="modal-backdrop"
         aria-hidden="true"
         (click)="staticBackdrop || close()"></div>
</div>