无法在两个mat-icon图标间来回切换，请求技术帮助

你当前的代码只能将图标单向设置为arrow_back，无法实现在arrow_forward和arrow_back之间来回切换的效果。只需修改组件逻辑，通过判断当前图标状态来切换即可：

修改后的TS组件代码 #

public icon = 'arrow_forward';
public changeIcon(){
  // 根据当前图标值切换为相反的图标
  this.icon = this.icon === 'arrow_forward' ? 'arrow_back' : 'arrow_forward';
}

修改后的HTML代码 #

<button  type="button" mat-icon-button mat-mini-fab data-bs-target="#sidebar" 
          data-bs-toggle="collapse" (click)="changeIcon()"
          color="primary"><mat-icon>{{icon}}</mat-icon></button>

逻辑说明 #

每次点击按钮时，方法会自动判断当前的icon值：

• 如果当前是arrow_forward，就切换为arrow_back
• 如果当前是arrow_back，就切换回arrow_forward

这样就能实现点击按钮切换图标的需求了。

内容的提问来源于stack exchange，提问作者user18385412