Results 1 to 2 of 2

Thread: Trying to use Material Icons to a theme

  1. #1
    Sencha User
    Join Date
    Aug 2017

    Default Trying to use Material Icons to a theme

    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!

  2. #2
    Sencha User bressi's Avatar
    Join Date
    Jan 2016



    I'm getting the same issue too.

    Please let us know.


Similar Threads

  1. [OPEN] Material Icons and Ext.theme.Material not documented
    By mtkutz in forum Sencha Documentation
    Replies: 6
    Last Post: 28 Mar 2019, 7:00 PM
  2. Google Material Design theme
    By dandvd in forum Ext 5: Q&A
    Replies: 44
    Last Post: 21 Sep 2017, 12:56 AM
  3. Material theme in the classic toolkit
    By marta.gonzalez in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 31 Jul 2017, 4:10 AM
  4. iconCls don´t work with material icons in a treelist
    By marta.gonzalez in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 20 Jul 2017, 6:44 AM
  5. Material theme contains deprecated variables
    By Zdeno in forum Ext 6.2 Early Access
    Replies: 0
    Last Post: 18 Aug 2016, 4:37 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts