How to reconcile Font-Awesome and Material Design icon fonts?

Question

Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially - to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different - maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.

So far I've patched Google's "material-icons" CSS class with:

{
    font-size: 150%;
    transform: translate(-10%,20%);
}

The Material-Design icons are also wider than the Font-Awesome set - I haven't decided how to address that yet. I haven't used many icons - there may be more issues with ones I haven't tried.

Answer 1

I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)

.material-icons {
  font: normal normal normal 16px/1 'Material Icons';
  display: inline-block;
  transform: translateY(10%);
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

Answer 2

Better use

font-size: 115%;
vertical-align: text-bottom;

transformations make problems when you use line-height larger than 1