Lightning record view and Edit form with Save and cancel Icons

 Tried with a minimal design of View and Edit form of Lightning record card using lightning-record-view-form and lightning-record-edit-form.

Save and Cancel icons on Lightning record form

saveCancelIconsForContactCard.html

<template>
    <!-- view mode form -->
    <template if:true={isViewMode}>
        <lightning-card class="slds-col slds-p-vertical_xx-small slds-size_1-of-1"
                        icon-name="standard:related_list"
                        title="Contact Card">
        
        <!-- for edit button icon-->
        <lightning-button-icon class="slds-m-around_none"
                                icon-name="action:edit"
                                onclick={switchForm}
                                variant="container"
                                slot="actions"
                                alternative-text="edit">
        </lightning-button-icon> 
        
        <!-- to view record data -->
        <lightning-record-view-form density="comfy"  
                                    record-id={recordId} 
                                    object-api-name="Contact">
            <div class="slds-m-horizontal_medium">
                <template for:each={FIELDS} for:item="field">
                    <div key={field.name}>
                    <template if:true={field.label}>
                        <div class="slds-form-element_label slds-no-flex">
                            {field.label}
                        </div>
                        <lightning-output-field field-name={field.name} variant="label-hidden"></lightning-output-field>
                    </template>
                    <template if:false={field.label}>
                        <lightning-output-field field-name={field.name}></lightning-output-field>
                    </template>
                </div>
                </template>
            </div>
        </lightning-record-view-form>             
        </lightning-card>
    </template>
    
    <!-- Loading Spinner-->
    <template if:true={loading}>
        <lightning-spinner alternative-text="Loading..." size="medium"></lightning-spinner>
    </template>

    <!-- Edit form-->
    <template if:false={isViewMode}>
        
        <!-- to edit record-->
        <lightning-record-edit-form density="comfy"
                                    record-id={recordId}
                                    object-api-name="Contact"
                                    onsubmit={handleSubmit}
                                    onsuccess={handleSuccess}
                                    onerror={handleError}>

            <lightning-card class="slds-col slds-p-vertical_xx-small slds-size_1-of-1"
                                        icon-name="standard:related_list"
                                        title="Contact Card">  
                
                <!-- Save and cancel icons -->                                     
                <lightning-button-icon icon-name="action:remove" 
                                        onclick={switchForm}  
                                        variant="container"
                                        slot="actions"
                                        alternative-text="Cancel">
                </lightning-button-icon>    
                <lightning-button-icon icon-name="action:check" 
                                        type="submit"  
                                        variant="container"
                                        slot="actions"
                                        alternative-text="Save">
                </lightning-button-icon>            
                <div class="slds-m-horizontal_medium">
                    <!-- show input fields -->
                    <template for:each={FIELDS} for:item="field">
                        <div key={field.name}>
                        <template if:true={field.label}>
                            <div class="slds-form-element_label slds-no-flex">
                                {field.label}
                            </div>
                            <lightning-input-field field-name={field.name} variant="label-hidden"></lightning-input-field>
                        </template>
                        <template if:false={field.label}>
                            <lightning-input-field field-name={field.name}></lightning-input-field>
                        </template>
                    </div>
                    </template>
                </div> 
            </lightning-card> 
        </lightning-record-edit-form>                                   
    </template>
</template>

saveCancelIconsForContactCard.js

import { LightningElement, api} from 'lwc';

export default class SaveCancelIconsForContactCard extends LightningElement {
    isViewMode = true;
    loading = false;
    @api recordId;

    FIELDS = [{name: 'FirstName' },
        {name: 'LastName'},
        {name: 'Phone', label: 'Home phone'}]
    
    // Switching forms, view and edit mode    
    switchForm(){
        this.isViewMode = !this.isViewMode;
    }

    // on submit, show the spinner
    handleSubmit(){
        this.loading = true;
    }

    // onsuccess, stop the loader spinner and change the form to view mode
    handleSuccess(){
        this.loading = false;
        this.switchForm();
    }

    // handle error message 
    handleError(evt){
        console.log('ERROR updating contact record:'+JSON.stringify(evt));
        this.loading = false;
    }
}

saveCancelIconsForContactCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo