css - Ionicon を CSS 変換するにはどうすればよいですか?

Question

bouncy-arrowマークアップで配置および回転できるディレクティブを構築しようとしています。

angular.module('directives').directive("bouncyArrow", function ($compile) {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '='
        },
        link: function (scope, element, attrs) {

            element.css('transform', 'rotate('+attrs.heading+'deg)');
            element.css('-webkit-transform', 'rotate('+attrs.heading+'deg)');

            element.css('background-color', 'red');

        }
    };

});

これは私のテンプレートに表示されます：

<bouncy-arrow heading="15"></bouncy-arrow>

赤い背景色の矢印が正しく表示されます。ただし、変換は効果がありません。に変換を適用するにはどうすればよいioniconですか?

更新：これが修正です...

angular.module('directives').directive("bouncyArrow", function () {

    return {
        replace: true,
        restrict: 'E',
        template: '<span class="ion-arrow-right-c"></span>',
        scope: {
            heading: '=',
            scale: '=',
            positionx: '=',
            positiony: '='
        },
        link: function (scope, element, attrs) {

            var transforms = [
                'translate(' + attrs.positionx+'px,'+attrs.positiony + 'px)',
                'scale(' + attrs.scale + ')',
                'rotate(-'+attrs.heading+'deg)',
            ];

            var css = {
                selector: '.bouncy-arrow:before',
                rules: [
                    'transform: '+transforms.join(' '),
                    '-webkit-transform: '+transforms.join(' ')
                ]
            };


            var sheet = css.selector + ' {' + css.rules.join(';') + '}';
            angular.element(document).find('head').prepend('<style type="text/css">' + sheet + '</style>');

            element.addClass('bouncy-arrow');
        }
    };

});