How can I dynamically change the shape of a clr-icon custom element?

Question

In the Clarity Icon docs they show that you can use the shape attribute to set the icons shape like this:

<clr-icon shape="info-circle" size="16"></clr-icon>

In my angular template I am using a clr-icon element like this:

<clr-icon [shape]="myShape"></clr-icon>

And use my component to set the string value of the shape bound to myShape:

export class MyComponent {
    public myShape = 'volume-up';

    changeShape() {
        if(this.myShape === 'volume-up') {
            this.myShape = 'volume-mute';
            return;
        }
        this.myShape = 'volume-up;
    }
}

Using a button (not shown in the template) I want to run the changeShape() to dynamically change the shape of the icon but nothing is happening, what am I missing?

Answer 1

Please refer to Angular Template Syntax Binding targets section. Link: https://angular.io/guide/template-syntax#binding-targets

You need to use:

[attr.shape]="myShape"

Demo: https://plnkr.co/edit/m4v5hXMxWRL5ObD3TPaO?p=preview