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

问题

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?

回答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

来源：https://stackoverflow.com/questions/46914238/how-can-i-dynamically-change-the-shape-of-a-clr-icon-custom-element