Vertical Section in angular card

Question

I'm trying to duplicate a mat-card layout and haven't found the right words to search yet. I'm using angular and want to set up a mat-card that has a vertical section on the left hand side which allows me to put a logo that is centered on the section line. I've included a sample image that I'm trying to recreate. example card

My Card

<div class="container">
    <div class="flex-container" fxLayout="row">
        <mat-card>
            <aside>

            </aside>
            <mat-card-header>
                <mat-card-title>{{project.name | uppercase}}</mat-card-title>
                <mat-card-subtitle>{{project.location}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <section>
                    Last Scan: {{project.lastScanDate | date: 'shortDate'}}
                </section>
            </mat-card-content>
        </mat-card>
    </div>
</div>

I tried adding an "aside" but that doesn't show up unless I include text.

Answer 1

this is just a raw example of what you want, you can change the icon image by putting your image URL in css, so this is just an iea how you can do what you want. change the things as per your need.

.flex-container {background: #ccc; padding: 20px 0 0;border-radius: 5px; box-sizing: border-box; border-left: 25px solid #5243AA; min-height: 150px;}
mat-card {display: flex; flex-direction: column; justify-content: space-between;min-height: 150px; padding-left: 20px;}
mat-card-content {margin-left: -20px; background: #fff; padding: 10px;     box-shadow: 1px 3px 7px -1px #ddd;}

mat-card-title {position: relative;}
mat-card-title:after {position: absolute; content: ""; height: 20px; width: 20px; left: -30px; top: 0; background-image: url(https://img.favpng.com/21/1/24/arrow-icon-circle-icon-direction-icon-png-favpng-Lmfw1dQK3ZtSWQX1kUmGXEPVh.jpg); background-size: cover;}

<div class="container">
<div class="flex-container" fxLayout="row">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{project.name | uppercase}}</mat-card-title>
        </mat-card-header>
        <mat-card-subtitle>{{project.location}}</mat-card-subtitle>
        <mat-card-content>
            <section>
                Last Scan: {{project.date | date: 'shortDate'}}
            </section>
        </mat-card-content>
    </mat-card>
</div>
</div>