How use MaterialDesign-Webfont?


I want to use this font icon, and all I try for integrating it is not working !


You can use any custom font, did you go through the tutorials and followed the steps?


I did but not working !
in my app.component.css, I use .md-icon {
font-family: Material Design Icons,“Material Design Icons”,“materialdesignicons-webfont”;
} and in my button is
If you can try and send me your result, I’m hopeless


Now everything is good, it works properly.
It was enough to change the file css in

.md-icon {
font-family: “materialdesignicons-webfont”;

Then delete the application in the mobile then relaunch with “tns run android”. And everything worked properly


Works just fine for me with {N} 3.4.0. Just downloaded the materialdesignicons-webfont.ttf from Github and placed it inside app/fonts


@import '~nativescript-theme-core/css/core.light.css';

.md-icon {
    font-family: "Material Design Icons", materialdesignicons-webfont;
    font-size: 50;
    color: black;


<Page xmlns="" navigatingTo="navigatingTo" class="page">
    <FlexboxLayout class="p-20" flexDirection="row" verticalAlignment="center">
        <Label text="{{ icon1 }}" class="md-icon"/>
        <Label text="{{ icon2 }}" class="md-icon"/>


import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = new HelloWorldModel();


import { Observable } from 'data/observable';

export class HelloWorldModel extends Observable {

    constructor() {
        this.set("icon1", String.fromCharCode(0xf101));
        this.set("icon2", String.fromCharCode(0xf102));


Thank you ! You saved me