How use MaterialDesign-Webfont?


#1

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


#2

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

https://docs.nativescript.org/ui/styling#using-fonts


#3

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


#4

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


#5

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

app.css

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

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

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <FlexboxLayout class="p-20" flexDirection="row" verticalAlignment="center">
        <Label text="{{ icon1 }}" class="md-icon"/>
        <Label text="{{ icon2 }}" class="md-icon"/>
    </FlexboxLayout>
</Page>

main-page.ts

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();
}

main-view-model.ts

import { Observable } from 'data/observable';

export class HelloWorldModel extends Observable {

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


#6

Thank you ! You saved me