Hello, colleagues!
I have my own theme derived from theme-ios and want to use Material Design Icons () in it. As this icon font is not present in this theme, I have to plug it in.

Maybe i do it in a completely wrong way, or there are errors in my steps?

What I did:

1) Added the following to \packages\local\my-theme\sass\var\Component.scss:

Code:
$font-icon-font-family: 'Material Icons';
2) Added to \packages\local\my-theme\sass\src\Component.scss:

Code:
$font-path: get-resource-path('fonts');
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url($font-path + '/MaterialIcons-Regular.ttf') format('truetype');
}
@if ($enable-all-icon-classes) {
  @each $icon in $material-icons {
    @include material-icon-class($icon);
  }
}
3) Added to \packages\local\my-theme\resources a \fonts subfolder with MaterialIcons-Regular.ttf font file, and also a fonts.css with the following:

Code:
@font-face {
    font-family : 'MaterialIcons';
    src         : url('/fonts/MaterialIcons-Regular.ttf');
    src         : url('/fonts/MaterialIcons-Regular.ttf')
    format('woff'), url('/fonts/MaterialIcons-Regular.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
}
4) added to \my-theme\sass\etc\mixins\ a icons.scss file wih icon definitions


Now I try to build it via sencha cmd and receive the following compilation error:

Code:
Reference to undeclared variable $material-icons => /packages/local/my-theme/sass/src/Component.scss


Unknown definitions for mixin named material-icon-class : /packages/local/my-theme/sass/src/Component.scss

I saw some advice in similar cases to add to app.json some requirement like this (this is for font-awesome):

Code:
"requires": [
    "font-awesome"
],

But I don't understand what I have to put here if I want to use material icons?

Also, maybe there are mistakes in the previous steps, or I've missed something?

Please help to figure out)

Thank you in advance!