how to incorporate font awesome in a dart component?

The following html displays a nice camera icon to the left of the text. When trying to style polymer components, how is this achieved?

<!doctype html>
<html>
<head>
   <link rel="stylesheet" id="font-awesome-4-css" href="http://astronautweb.co/wp-content/themes/astro2012/css/font-awesome-4.0.3.css?ver=4.0.3" type="text/css" media="all">
</head>
<body>
  <p><i class="fa fa-camera-retro fa-lg"></i> Cool camera</p>
</body>

Specifically, where should the link be included, what should applyauthorstyles be set to, what should style within the template be.

Solution

EDIT

applyAuthorStyles is deprecated or already removed.

I haven't tried it myself yet, but it should work if the font-awesome styles are added to the component. This is cumbersome because the styles need to be added to each component where FA is used.

Pixelate uses SASS with these variables: https://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss I haven't used SASS yet so I can't provide more details.

Another solution is to add * /deep/ in front of each selector.

You can use this code to build a script that does this:

import 'package:csslib/parser.dart';
import 'package:csslib/visitor.dart';

String transform(String src){
  var printer = new ShadowDOMTransformPrinter();
  printer.visitTree(parse(src), pretty: true);
  return printer.toString();
}

class ShadowDOMTransformPrinter extends CssPrinter {
  void visitSelector(Selector selector){
    emit(' * /deep/ ');
    super.visitSelector(selector);
  }
}

This modified CSS doesn't work outside the shadowDOM therefor the modified and unmodified styles are needed (each selector once with and once without /deep/