Include ng-mfb in combination with ngMaterial

button.tpl.html

<li>
    <a href="" data-mfb-label="{{label}}" class=" md-button md-default-theme md-fab mfb-component__button--child"
       ng-include="customContent">
        <script type="text/ng-template" id="NGMFB_child-icon-template">
            <i class="mfb-component__child-icon {{icon}}"></i>
        </script>
    </a>
</li>

custom.css

.mfb-component__buttonraw--main, .mfb-component__buttonraw--child {
  display: inline-block;
  padding: 15px;
  position: relative;
}

.mfb-component__button--main, .mfb-component__buttonraw--main {
  height: 56px;
  width: 56px;
  z-index: 20;
}

.mfb-component__button--child, .mfb-component__buttonraw--child {
  height: 56px;
  width: 56px;
}

.mfb-absolute-left {
  left:1px;
}

index.html

<nav mfb-menu position="br" effect="zoomin"
         active-icon="navigation:ic_close_24px" resting-icon="content:ic_add_24px"
         toggling-method="hover" custom-content="menu.ng.html">

        <a mfb-button icon="social:ic_person_add_24px" ng-click=""
           data-mfb-label="{{'ADD_NEW_PLAYER' | translate}}"
           custom-content="mfb_button.ng.html"></a>
        <a mfb-button icon="social:ic_group_add_24px" ng-click=""
           data-mfb-label="{{'ADD_NEW_TEAM' | translate}}"
           custom-content="mfb_button.ng.html"></a>
    </nav>

menu.tpl.html

<ul class="mfb-component--{{position}} mfb-{{effect}}" data-mfb-toggle="{{togglingMethod}}" data-mfb-state="{{menuState}}">
    <li class="mfb-component__wrap">
        <a ng-click="toggleMenu()" ng-attr-data-mfb-label="{{label}}"
           class="mfb-component__button--main md-button md-default-theme md-fab" ng-include="customContent">
            <script type="text/ng-template" id="NGMFB_main-icon-template">
                <i class="mfb-component__main-icon--resting {{resting}}"></i>
                <i class="mfb-component__main-icon--active {{active}}"></i>
            </script>
        </a>
        <ul class="mfb-component__list" ng-transclude>
        </ul>
    </li>
</ul>

mfb_button.html

<md-icon md-svg-icon="{{icon}}"></md-icon>

mfb_menu.html

<md-icon md-svg-icon="{{resting}}" class="mfb-component__main-icon--resting mfb-absolute-left {{resting}}"></md-icon>
<md-icon md-svg-icon="{{active}}" class="mfb-component__main-icon--active mfb-absolute-left {{resting}}"></md-icon>