Angular material card menu at the top right

Question

How to add menu at the top right of the card using angular material, as per the https://material.angular.io/components/card/overview document there is no tag for that.

I want to add a button with icon at the right top as shown in the picture

    <mat-card class="custome-card">
    <a [routerLink]="['/products/123']">
        <img mat-card-image
            src="https://wonderfulengineering.com/wp-content/uploads/2013/12/Lamborghini-wallpaper-14.jpg"
            alt="Photo of a Shiba Inu">
    </a>
    <mat-card-content>
        <a [routerLink]="['/products/123']" class="productDetail"><span
                class="mat-subheading-2">Lamborghini Aventador</span></a><br>
        <span>NRs 1 - 2 Crore</span><br>
        <strong>Size: </strong> <span>XL L M S XS</span>
    </mat-card-content>
    <mat-card-actions>
        <div fxLayout="row" fxLayoutAlign="center">
            <falcon-button [field]="favoriteBtnConfig"></falcon-button>&nbsp;
            <falcon-button [field]="shareBtnConfig"></falcon-button>&nbsp;
            <falcon-button [field]="shopCartBtnConfig"></falcon-button>
        </div>
    </mat-card-actions>
</mat-card>

The above code create the image as below

Answer 1

This solve the issue

 .mdl-card__menu {
        position: absolute;
        right: 16px;
        top: 16px;
    }