PDA

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



gpetrov
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'),
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:


@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": [
"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!

bressi
22 Oct 2018, 6:03 AM
Hi,

I'm getting the same issue too.

Please let us know.

Regards,
Claudia