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:

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

$font-path: get-resource-path('fonts');
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
  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:

@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:

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):

"requires": [

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!