How do I use Material Icons Outline to a ::before element offline

Question

I would like to know is it possible to use the outline type of the material fonts while they are downloaded locally to a ::before or ::after element? The closest I got is explained in this thread - How to host material icons offline?

(you can scroll to the lower part of the thread or just simply press crtl+f and in the find window type "outline" and it will get you there - starting from the second result).

Here a dude named Wale explaines step by step how to use the outline type and indeed it works. I add an i-tag to the HTML with the class material-icons-outline, the icon is diplayed perfectly. However, when I try to do the same to a ::before element nothing is displayed. If anyone has an idea how this can be contemplate to work, a help will be much appreciated. Here are my HTML and CSS.

        <div class="connected-house-links">
            <ul>
                <li class="material-icons">Енергетска Ефикасност</li>
                <li class="material-icons">Безбедност и Сигурност</li>
                <li class="material-icons-outline">Комфорт</li>
                <li class="material-icons">Заштита на најмилите</li>
            </ul>
        </div>

//setting up to use both type of icons

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Material Icons Outline';
  font-style: normal;
  font-weight: 400;
  src: url(Material-Icons-Outline.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('Material Icons-Outline'),
       url(Material-Icons-Outline.woff2) format('woff2'),
       url(Material-Icons-Outline.woff) format('woff'),
       url(Material-Icons-Outline.ttf) format('truetype');
}

.material-icons-outline {
  font-family: 'Material Icons Outline';
}

.material-icons {
  font-family: 'Material Icons';
}

.material-icons-outlined,
.material-icons {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}



//using the desired fonts in css

.connected-house-links ul .material-icons:first-child::before {
    content: '\e1a3';
    font-weight: 100;
    transform: scale(2);
    position: absolute;
    left: -2em;
    bottom: -0.2em
}

.connected-house-links ul .material-icons:nth-child(2)::before {
    content: '\e8e8';
    transform: scale(2);
    position: absolute;
    left: -2em;
    bottom: -0.2em
}

.connected-house-links ul .material-icons:nth-child(3)::before {
    font-family: 'Material Icons Outline';
    content: '\e88a';
    transform: scale(2.3);
    position: absolute;
    left: -2em;
    bottom: -0.1em
}

.connected-house-links ul li:last-child::before {
    font-family: 'connected-home-icons';
    content: '\e900';
    transform: scale(1.7);
    position: absolute;
    left: -2em;
    bottom: -0.1em
}