Bootstrap 4 - toggle button changes ">" and "<" icons based on (active) state

Issue

How can I show an icon to the right side of the button, e.g. ">" or "<", based on the active state of a Bootstrap 4 button? The application is Angular based.

The standard Bootstrap toggle button looks like:

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Text plus <!-- either icon ">"or "<" is shown
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some text down here.
  </div>
</div>

So in the normal state the button shows "Text plus '>' (icon)". When toggled into the active state, the button shows "Text plus '<' (icon)".

I have seen solutions that have the two icons just listed within the .... That does not work (anymore).

Solution

1. Demo

Show the Toggle button:

Click on the button:

2. Install the following packages:

$ npm install bootstrap --save
$ npm install jquery --save
$ npm install popper.js --save

3. Add packages to e.g. Angular (angular.json)

> "styles": [      "node_modules/bootstrap/dist/css/bootstrap.min.css", 
> "styles.css" ], 

> "scripts": [    
>    "node_modules/jquery/dist/jquery.min.js",  
>    "node_modules/popper.js/dist/umd/popper.min.js",  
>    "node_modules/bootstrap/dist/js/bootstrap.min.js" ],

4. Template:

[aria-expanded="true"] .fa-chevron-circle-up,
[aria-expanded="false"] .fa-chevron-circle-down {
  display:none;
}

<div>
  <button class="btn btn-primary" type="button" data-toggle="collapse" 
      data-target="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS">
    Text plus icon
    <i class="fa fa-chevron-circle-up"></i>
    <i class="fa fa-chevron-circle-down"></i>
  </button>
  <div class="collapse" id="collapseNEWS">
    <div class="card card-body">
      Some text down here.
    </div>
  </div>
</div>

5. Code

No Component code needed.

Answered By - tm1701