Как использовать контур значков материалов для автономного элемента :: before

Question

Я хотел бы знать, возможно ли использовать тип структуры шрифтов материала, когда они загружаются локально в элемент :: before или :: after? Самое близкое, что я получил, объяснено в этой теме - Как разместить значки материалов в автономном режиме?

(вы можете прокрутить до нижней части цепочки или просто нажать crtl + f и в найдите тип окна "контур", и он попадет туда - начиная со второго результата).

Здесь чувак по имени Уэйл объясняет шаг за шагом, как использовать тип контура, и действительно, он работает. Я добавляю i-тег к HTML с классом материал-иконки-контур, значок отлично отображается. Однако, когда я пытаюсь сделать то же самое с элементом :: before, ничего не отображается. Если у кого-то есть представление о том, как это можно сработать, мы будем очень признательны за помощь. Вот мои HTML и 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
}