View Full Version : Trying to use Material Icons to a theme

25 Sep 2017, 6:20 AM
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!

22 Oct 2018, 6:03 AM

I'm getting the same issue too.

Please let us know.