title: Plus minus sign for accordion
body: <p>I have implemented an accordian in my angular 7 application using css and need to change the Toggle text to an image or content showing + sign for collapse and - for expand. How do i achieve that. I have temporarily written toggle text. That needs to be replaced by + and - sign. Please note I am having scss stylesheet. I should be able to change the colour of the sign later . I have created stackbitz</p>
  
  <p><a href="https://stackblitz.com/edit/angular-vxtfpi" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-vxtfpi</a></p>
  
  <p>Html</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  
  &lt;div class="card"&gt;
      &lt;div class="card-header panel-heading"&gt;
          &lt;span class="left-label" style="font-size: 18px; font-weight: bold; "&gt;Fund Classes&lt;/span&gt;
  
          &lt;a class="pull-right" [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="expand()" role="button"
              [attr.aria-expanded]="isExpanded" aria-controls="nva"&gt; Toggle
          &lt;/a&gt;
  
  
      &lt;/div&gt;
    &lt;div [ngClass]="{'show': isExpanded}" id="nva" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
      [attr.aria-expanded]="isExpanded"&gt;
  &lt;div class="card-body"&gt;
  
      &lt;div class="form-group row"&gt;
          &lt;label for="inputName" class="col-md-2 " style="font-weight: bold"&gt;Name&lt;/label&gt;
                  &lt;div class="col-md-2" style="border: 1px"&gt;
  
                      &lt;kendo-dropdownlist style="width:100%" 
                          class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                          [valuePrimitive]="true" valueField="Id" &gt;
                      &lt;/kendo-dropdownlist&gt;
                  &lt;/div&gt;
  
                  &lt;label for="inputEmail" class="col-md-2"  style="font-weight: bold"&gt;NAV Reporting Cycle&lt;/label&gt;
                  &lt;div class="col-md-2"&gt;
  
                      &lt;kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                          [data]="ReportingCycle"  [filterable]="false"
                          [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'"&gt;
                      &lt;/kendo-dropdownlist&gt;
  
                  &lt;/div&gt;
  
                  &lt;label for="inputTitle" class="col-md-2"  style="font-weight: bold"&gt;Plan Asset Fund&lt;/label&gt;
                  &lt;div class="col-md-2"&gt;
  
  
                      &lt;label  style="font-size: 13px;font-weight: normal;cursor: pointer"&gt;
                          &lt;input type="checkbox"  style="width: 13px; height: 13px;" /&gt;
                          Yes &lt;/label&gt;
                  &lt;/div&gt;
    &lt;/div&gt;
  
          &lt;div class="form-group row"&gt;
          &lt;label for="inputName" class="col-md-2 " style="font-weight: bold"&gt;Name&lt;/label&gt;
                  &lt;div class="col-md-2" style="border: 1px"&gt;
  
                      &lt;kendo-dropdownlist style="width:100%" 
                          class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                          [valuePrimitive]="true" valueField="Id" &gt;
                      &lt;/kendo-dropdownlist&gt;
                  &lt;/div&gt;
  
                  &lt;label for="inputEmail" class="col-md-2"  style="font-weight: bold"&gt;NAV Reporting Cycle&lt;/label&gt;
                  &lt;div class="col-md-2"&gt;
  
                      &lt;kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                          [data]="ReportingCycle"  [filterable]="false"
                          [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'"&gt;
                      &lt;/kendo-dropdownlist&gt;
  
                  &lt;/div&gt;
  
                  &lt;label for="inputTitle" class="col-md-2"  style="font-weight: bold"&gt;Plan Asset Fund&lt;/label&gt;
                  &lt;div class="col-md-2"&gt;
  
  
                      &lt;label  style="font-size: 13px;font-weight: normal;cursor: pointer"&gt;
                          &lt;input type="checkbox"  style="width: 13px; height: 13px;" /&gt;
                          Yes &lt;/label&gt;
                  &lt;/div&gt;
    &lt;/div&gt;        
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>