Mat Expansion Panel not getting displayed

Question

Hi

  I am using expansion panel in Angular 17 but it is not getting displayed. Below is the HTML

I want that on right Hand Side some arrow (say v ) should be displayed when clicked it should expand. .

If it again clicked it should collapse.

                                <mat-accordion>
                                <mat-expansion-panel>

                                <div class="project_widget">
                                    <mat-expansion-panel-header>
                                    <div class="header">
                                        <h2><i class="fa fa-caret-right me-2"></i>Father</h2>
                                    </div>
                                    </mat-expansion-panel-header>
                                    <div class="body">
                                        <div class="p-3 shadow-sm">
                                            <div class="d-inline-block">
                                                <div class="label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>Custody Allowed</div>
                                                <div class="label bg-green rounded-pill m-1 col-auto"><i class="fa fa-check-circle me-1"></i>Correspondence Address</div>
                                            </div>
                                            <hr/>

                                            <div class="row">
                                                <div class="col-md-3 col-6">
                                                    <p class="text-muted mb-0">Full Name</p>
                                                    <h6>{{fatherData.fullName}}</h6>
                                                </div>
                                                <div class="col-md-3 col-6">
                                                    <p class="text-muted mb-0">Date of birth</p>
                                                    <h6>{{fatherData.dateOfBirth }}</h6>
                                                </div>
                                                <div class="col-md-3 col-6">
                                                    <p class="text-muted mb-0">Occupation</p>
                                                    <h6>Software Engineer</h6>
                                                </div>
                                                <div class="col-md-3 col-6">
                                                    <p class="text-muted mb-0">Department</p>
                                                    <h6>{{fatherData.department}}</h6>
                                                </div>
                                                <div class="col-md-3 col-6">
                                                    <p class="text-muted mb-0">Specialization</p>
                                                    <h6>{{fatherData.specialization}}</h6>
                                                </div>

                                                <div class="col-lg-12">
                                                    <div class="row">
    
   
                                                        <div class="col-md-6 col-6 align-items-center">
                                                            <div class="col">
                                                                <p class="label bg-blue rounded-pill mb-2"><i class="fa fa-map-marker me-1"></i>Address</p>
                                                            </div>
                                                            <div class="col">
                                                                <small>Official</small>
                                                                <h6>Industrial Area, Phase 2, Mohali, India, Punjab, Chandigarh - 160275</h6>
                                                                <h6><span class="col-blue">Latitude</span>: 365214 <span class="col-blue">Longitude</span>: 425632</h6>
                                                            </div>
                                                            
                                                        </div>
    
                                                        <div class="col-md-6 col-12">
                                                            <p class="text-muted mb-0">Description</p>
                                                            <h6>This address is official address and not permanent address, so don't follow this address.</h6>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                </mat-expansion-panel>
                                </mat-accordion> 

Thanks