如何通过data属性将fontAwesome图标传递给CSS内容

Question

I'm using a mixture of angular, html and css for my frontend build and I'm trying to change a font awesome icon onclick with angular. However, I can't get it to pass the unicode to css and display the correct icon. It just prints out the unicode instead.

Here is my CSS:

&:before {
        content: attr(data-icon);
        font-family: "fontAwesome";
        font-size: 2em;
        position: absolute;
        left: .65em;
        top: .25em;
    }

My html/angular:

<div class="accordion--title" ng-click="showAccordionDetail = !showAccordionDetail" ng-attr-data-icon="{{showAccordionDetail && '\f107' || '\f106' }}">

Answer 1

Use ng-class , much easier to do this:

<div
    ng-init="showAccordionDetail = false"
    class="accordion--title"
    ng-click="showAccordionDetail = !showAccordionDetail" 
    ng-class="{true:'fa fa-angle-down', false: 'fa fa-angle-right'}[showAccordionDetail]">
        click me
</div>

Answer 2

As Enkode's answer, it's easier to use ng-class but I've made some changes to make it simpler.

<div ng-init="showAccordionDetail = false"
     class="accordion--title"
     ng-click="showAccordionDetail = !showAccordionDetail" 
     ng-class="{'fa fa-angle-down': showAccordionDetail, 'fa fa-angle-right': !showAccordionDetail}">
    click me
</div>

Hope this helps.