Material Design Icons not showing

In assets/fonts, I have materialdesignicons-webfont.ttf and in assets/css, I have materialdesignicons.css. And finally in main.js, I have the following:

import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
  'mdi': './assets/css/materialdesignicons.css'
};
TNSFontIcon.loadCss();

Vue.filter('fonticon', fonticon);

And I am using icon like the following:

<Label class="mdi" :text="'mdi-youtube' | fonticon" style="color: #fff;font-size: 40px;" />

However, icons are not showing at all.

Btw, I grabbed the css from https://github.com/Templarian/MaterialDesign-Webfont/tree/master/css.

Please help!

[liamlevesque]

@tralves - sorry to hijack this, but I’m having a similar issue using an icomoon icon font - in the logs I don’t see any icons. Is that what is supposed to happen?

I have the fonts in /app/fonts/icons.ttf and the icomoon css file in app/assets/icons.css like so: I have the following in main.js:

import { TNSFontIcon, fonticon } from "nativescript-fonticon";

TNSFontIcon.debug = true;
TNSFontIcon.paths = {
icon: "./assets/icons.css"
};
TNSFontIcon.loadCss();

Vue.filter("fonticon", fonticon);

and in my app.scss I have: .icon { font-family: icons; font-weight: 400; }

but still get nothing in my app. 😦

Any suggestions?

[dcolley]

this version worked for me: https://github.com/nativescript-community/fonticon