After spending some time on the mat-dialog documentation, I discovered that I can add a background image to the mat-dialog using panelClass: 'my-class' to customize its appearance. This applies the class my-class to the div with the class cdk-overlay-pane within the mat-dialog.
https://i.sstatic.net/Zjn6G.png
I then added the following CSS to include a background image in the mat-dialog.
.my-class .mat-dialog-container {
background: url("assets/illustrations/abc.svg") no-repeat;
padding-bottom: 16px !important;
}
.my-class {
// background: white !important;
border-radius: 10px;
}
As a result, the mat-dialog ended up with a transparent background.
https://i.sstatic.net/swv9r.png
To address this issue, I added background: white; to my-class, and the mat-dialog then appeared like this.
https://i.sstatic.net/2asFH.png
Although everything seemed to be working fine, there was a minor bug where a white background of the same size briefly appeared upon closing the dialog before disappearing.