Transform rotate is not working in custom angular accordion

Question

I want to rotate icon as Transform: rotate(180deg). This property is not working but background-color: blue; is working perfectly. The classname iconUp is active while click accordion button. eg: [class.iconUp]="id === 'f1'".

<div class="pricing-accordion">
    <div class="pricing-accordion__item pb-30">
        <div class="pricing-accordion__item--header" id="f1" (click)="openAccordion('f1')" [class.iconUp]="id === 'f1'">
            <button>This is a title <span><i class="flaticon-down-arrow"></i></span></button>
        </div>
        <div class="pricing-accordion__item--body" *ngIf="id === 'f1'">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, voluptas   quaerat, vitae quisquam
                aperiam, consequuntur neque consequatur esse nesciunt cupiditate corporis minima nulla magni
                repellendus. Repellendus optio asperiores similique! Magnam.
            </p>
        </div>
    </div>

    <div class="pricing-accordion__item pb-30">
        <div class="pricing-accordion__item--header" id="f2" (click)="openAccordion('f2')" [class.iconUp]="id === 'f2'">
            <button>This is a title <span><i class="flaticon-down-arrow"></i></span></button>
        </div>
        <div class="pricing-accordion__item--body" *ngIf="id === 'f2'">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, voluptas quaerat, vitae quisquam
                aperiam, consequuntur neque consequatur esse nesciunt cupiditate corporis minima nulla magni
                repellendus. Repellendus optio asperiores similique! Magnam.
            </p>
        </div>
    </div>
</div>

.iconUp {
    button {
        span {
            i {
                transform: rotate(20deg);
                -webkit-transform: rotate(20deg);
                -moz-transform: rotate(20deg);
                background-color: blue;
                font-size: 30px;
            }
        }
        
    }
}

id:any = 'f1';

    openAccordion (ids:any) {
        console.log(ids);
        if(this.id == ids) {
            this.id = '';
        }
        else {
            this.id = ids;
        }
    }