nathanwalker / nativescript-fonticon

Use custom font icon collections seamlessly with NativeScript.

Source moved here for better maintainability: https://github.com/nstudio/nativescript-ui-kit/blob/main/packages/nativescript-fonticon/README.md

---

## A simpler way to use font icons with NativeScript

The Problem

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

• CSS

.fa {
  font-family: FontAwesome;
}

• view

<Label class="fa" text="\uf293"></Label>

This works but keeping up with unicodes is not fun.

The Solution

With this plugin, you can instead reference the fonticon by the specific classname:

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label> 

Install

npm install nativescript-fonticon --save

Usage

FontAwesome will be used in the following examples but you can use any custom font icon collection.

• Place font icon .ttf file in app/fonts, for example:

app/fonts/fontawesome-webfont.ttf

• Create base class in app.css global file, for example:

.fa {
  font-family: FontAwesome, fontawesome-webfont;
}

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

• Copy css to app somewhere, for example:

app/font-awesome.css

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

• Configure your fonts and setup the converter:

import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

application.setResources( { fonticon } );
application.start({ moduleName: 'main-page' });

• Use the Converter, for example:

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label> 

Demo FontAwesome (iOS)	Demo Ionicons (iOS)

Demo FontAwesome (Android)	Demo Ionicons (Android)

Font Awesome 5

In this case, you have to copy and import each ttf file and associate it with the proper class:

.fas {
  font-family: Font Awesome 5 Free, fa-solid-800;
}
.far {
  font-family: Font Awesome 5 Free, fa-regular-400;
}

but still you will import the css only once with the fa prefix:

TNSFontIcon.paths = {
  'fa': 'font-awesome.css'
};

How about NativeScript with Angular?

If using Angular, use this instead:

• nativescript-ng2-fonticon

Why the TNS prefixed name?

TNS stands for Telerik NativeScript

iOS uses classes prefixed with NS (stemming from the NeXTSTEP days of old): https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

To avoid confusion with iOS native classes, TNS is used instead.

Credits

Idea came from Bradley Gore's post here.

Contributors

• NathanaelA

License

MIT

nativescript-fonticon's Issues

Use with TabView

This currently seems as it can't be used together with TabViews for the the TabViewItem title property on iOS.

I am able to user icons as text properties on label etc, but as soon as I go to use it on a title in a TabViewItem it returns a question mark.

<TabView id="tabViewContainer" class="fa" top="50" left="0" class="tabview" tabBackgroundColor="#ffffff" color="#ffffff" selectedTabTextColor="#000000"> <TabViewItem title="{{'fa-comment' | fonticon }}"> <Frame defaultPage="views/wall/wall" id="wallFrame" /> </TabViewItem>

Webpack bug

I am using nativescript-fonticon plugin and it all works just fine until I run with the webpack flags (tns run android --bundle --env.uglify --env.aot --env.snapshot).
and when I do it I don't see any icon, fir example this: <Label class="fa absolute-center action-icon" [text]="'fa-calendar-o' | fonticon"></Label>
And if I run it without those flags, only tns run android it works just fine again

any idea what can solved the problem? 🙂

[Nativescript-Vue] CSS file being loaded after home page is mounted

For some unknown reason, I recently (NS 6.1+) started to face an issue that the FontIcon CSS file is being loaded after my app home page is mounted, therefore, no icon is shown. However, if I navigate to another page and go back to my home, all icons are now visible.

If on my home page loaded event I force a refresh through the key property on the outer gridlayout the icons appear, because they are already loaded

[Nativescript-Vue] CSS file being loaded after home page is mounted

For some unknown reason, I recently (NS 6.1+) started to face an issue that the FontIcon CSS file is being loaded after my app home page is mounted, therefore, no icon is shown. However, if I navigate to another page and go back to my home, all icons are now visible.

If on my home page loaded event I force a refresh through the key property on the outer gridlayout the icons appear, because they are already loaded.

Does anyone know how to solve this issue without forcing this layout refresh?

not working with materialdesignicons

Hi!

I'm using ns7 with vue. Debug is set to true and shows that the icons are loading.
Problem is that the icons are not displayed.

I think the problem is in the parsing of the css because when I looked into the fonticon function
the keys in the TNSFontIcon.css[prefix] array where like "mdi-pencil:" (with the colon at the end).

If I'm changing the function and add the colon it shows the wrong symbol...

Any clues?

Doesn't work with single quotes on CSS

Hi!

I just spent an embarrassing amount of time figuring out why my CSS didn't. Turns out it was because we can't have single quotes, e.g.:

.fa-envelope-o:before {
    content: '\f003';
}

I figured the solution out. PR coming soon!

material-design-icons css parsing issue

this css is unabled to be parsed

.mdi-3d-rotation:before {
  content: "\ue84d";
}

.mdi-ac-unit:before {
  content: "\ueb3b";
}

.mdi-access-alarm:before {
  content: "\ue190";
}

.mdi-access-alarms:before {
  content: "\ue191";
}

.mdi-access-time:before {
  content: "\ue192";
}

.mdi-accessibility:before {
  content: "\ue84e";
}

.mdi-accessible:before {
  content: "\ue914";
}

.mdi-account-balance:before {
  content: "\ue84f";
}

.mdi-account-balance-wallet:before {
  content: "\ue850";
}

.mdi-account-box:before {
  content: "\ue851";
}

.mdi-account-circle:before {
  content: "\ue853";
}

.mdi-adb:before {
  content: "\ue60e";
}

.mdi-add:before {
  content: "\ue145";
}

.mdi-add-a-photo:before {
  content: "\ue439";
}

.mdi-add-alarm:before {
  content: "\ue193";
}

.mdi-add-alert:before {
  content: "\ue003";
}

.mdi-add-box:before {
  content: "\ue146";
}

.mdi-add-circle:before {
  content: "\ue147";
}

.mdi-add-circle-outline:before {
  content: "\ue148";
}

.mdi-add-location:before {
  content: "\ue567";
}

.mdi-add-shopping-cart:before {
  content: "\ue854";
}

.mdi-add-to-photos:before {
  content: "\ue39d";
}

.mdi-add-to-queue:before {
  content: "\ue05c";
}

.mdi-adjust:before {
  content: "\ue39e";
}

.mdi-airline-seat-flat:before {
  content: "\ue630";
}

.mdi-airline-seat-flat-angled:before {
  content: "\ue631";
}

.mdi-airline-seat-individual-suite:before {
  content: "\ue632";
}

.mdi-airline-seat-legroom-extra:before {
  content: "\ue633";
}

.mdi-airline-seat-legroom-normal:before {
  content: "\ue634";
}

.mdi-airline-seat-legroom-reduced:before {
  content: "\ue635";
}

.mdi-airline-seat-recline-extra:before {
  content: "\ue636";
}

.mdi-airline-seat-recline-normal:before {
  content: "\ue637";
}

.mdi-airplanemode-active:before {
  content: "\ue195";
}

.mdi-airplanemode-inactive:before {
  content: "\ue194";
}

.mdi-airplay:before {
  content: "\ue055";
}

.mdi-airport-shuttle:before {
  content: "\ueb3c";
}

.mdi-alarm:before {
  content: "\ue855";
}

.mdi-alarm-add:before {
  content: "\ue856";
}

.mdi-alarm-off:before {
  content: "\ue857";
}

.mdi-alarm-on:before {
  content: "\ue858";
}

.mdi-album:before {
  content: "\ue019";
}

.mdi-all-inclusive:before {
  content: "\ueb3d";
}

.mdi-all-out:before {
  content: "\ue90b";
}

.mdi-android:before {
  content: "\ue859";
}

.mdi-announcement:before {
  content: "\ue85a";
}

.mdi-apps:before {
  content: "\ue5c3";
}

.mdi-archive:before {
  content: "\ue149";
}

.mdi-arrow-back:before {
  content: "\ue5c4";
}

.mdi-arrow-downward:before {
  content: "\ue5db";
}

.mdi-arrow-drop-down:before {
  content: "\ue5c5";
}

.mdi-arrow-drop-down-circle:before {
  content: "\ue5c6";
}

.mdi-arrow-drop-up:before {
  content: "\ue5c7";
}

.mdi-arrow-forward:before {
  content: "\ue5c8";
}

.mdi-arrow-upward:before {
  content: "\ue5d8";
}

.mdi-art-track:before {
  content: "\ue060";
}

.mdi-aspect-ratio:before {
  content: "\ue85b";
}

.mdi-assessment:before {
  content: "\ue85c";
}

.mdi-assignment:before {
  content: "\ue85d";
}

.mdi-assignment-ind:before {
  content: "\ue85e";
}

.mdi-assignment-late:before {
  content: "\ue85f";
}

.mdi-assignment-return:before {
  content: "\ue860";
}

.mdi-assignment-returned:before {
  content: "\ue861";
}

.mdi-assignment-turned-in:before {
  content: "\ue862";
}

.mdi-assistant:before {
  content: "\ue39f";
}

.mdi-assistant-photo:before {
  content: "\ue3a0";
}

.mdi-attach-file:before {
  content: "\ue226";
}

.mdi-attach-money:before {
  content: "\ue227";
}

.mdi-attachment:before {
  content: "\ue2bc";
}

.mdi-audiotrack:before {
  content: "\ue3a1";
}

.mdi-autorenew:before {
  content: "\ue863";
}

.mdi-av-timer:before {
  content: "\ue01b";
}

.mdi-backspace:before {
  content: "\ue14a";
}

.mdi-backup:before {
  content: "\ue864";
}

.mdi-battery-alert:before {
  content: "\ue19c";
}

.mdi-battery-charging-full:before {
  content: "\ue1a3";
}

.mdi-battery-full:before {
  content: "\ue1a4";
}

.mdi-battery-std:before {
  content: "\ue1a5";
}

.mdi-battery-unknown:before {
  content: "\ue1a6";
}

.mdi-beach-access:before {
  content: "\ueb3e";
}

.mdi-beenhere:before {
  content: "\ue52d";
}

.mdi-block:before {
  content: "\ue14b";
}

.mdi-bluetooth:before {
  content: "\ue1a7";
}

.mdi-bluetooth-audio:before {
  content: "\ue60f";
}

.mdi-bluetooth-connected:before {
  content: "\ue1a8";
}

.mdi-bluetooth-disabled:before {
  content: "\ue1a9";
}

.mdi-bluetooth-searching:before {
  content: "\ue1aa";
}

.mdi-blur-circular:before {
  content: "\ue3a2";
}

.mdi-blur-linear:before {
  content: "\ue3a3";
}

.mdi-blur-off:before {
  content: "\ue3a4";
}

.mdi-blur-on:before {
  content: "\ue3a5";
}

.mdi-book:before {
  content: "\ue865";
}

.mdi-bookmark:before {
  content: "\ue866";
}

.mdi-bookmark-border:before {
  content: "\ue867";
}

.mdi-border-all:before {
  content: "\ue228";
}

.mdi-border-bottom:before {
  content: "\ue229";
}

.mdi-border-clear:before {
  content: "\ue22a";
}

.mdi-border-color:before {
  content: "\ue22b";
}

.mdi-border-horizontal:before {
  content: "\ue22c";
}

.mdi-border-inner:before {
  content: "\ue22d";
}

.mdi-border-left:before {
  content: "\ue22e";
}

.mdi-border-outer:before {
  content: "\ue22f";
}

.mdi-border-right:before {
  content: "\ue230";
}

.mdi-border-style:before {
  content: "\ue231";
}

.mdi-border-top:before {
  content: "\ue232";
}

.mdi-border-vertical:before {
  content: "\ue233";
}

.mdi-branding-watermark:before {
  content: "\ue06b";
}

.mdi-brightness-1:before {
  content: "\ue3a6";
}

.mdi-brightness-2:before {
  content: "\ue3a7";
}

.mdi-brightness-3:before {
  content: "\ue3a8";
}

.mdi-brightness-4:before {
  content: "\ue3a9";
}

.mdi-brightness-5:before {
  content: "\ue3aa";
}

.mdi-brightness-6:before {
  content: "\ue3ab";
}

.mdi-brightness-7:before {
  content: "\ue3ac";
}

.mdi-brightness-auto:before {
  content: "\ue1ab";
}

.mdi-brightness-high:before {
  content: "\ue1ac";
}

.mdi-brightness-low:before {
  content: "\ue1ad";
}

.mdi-brightness-medium:before {
  content: "\ue1ae";
}

.mdi-broken-image:before {
  content: "\ue3ad";
}

.mdi-brush:before {
  content: "\ue3ae";
}

.mdi-bubble-chart:before {
  content: "\ue6dd";
}

.mdi-bug-report:before {
  content: "\ue868";
}

.mdi-build:before {
  content: "\ue869";
}

.mdi-burst-mode:before {
  content: "\ue43c";
}

.mdi-business:before {
  content: "\ue0af";
}

.mdi-business-center:before {
  content: "\ueb3f";
}

.mdi-cached:before {
  content: "\ue86a";
}

.mdi-cake:before {
  content: "\ue7e9";
}

.mdi-call:before {
  content: "\ue0b0";
}

.mdi-call-end:before {
  content: "\ue0b1";
}

.mdi-call-made:before {
  content: "\ue0b2";
}

.mdi-call-merge:before {
  content: "\ue0b3";
}

.mdi-call-missed:before {
  content: "\ue0b4";
}

.mdi-call-missed-outgoing:before {
  content: "\ue0e4";
}

.mdi-call-received:before {
  content: "\ue0b5";
}

.mdi-call-split:before {
  content: "\ue0b6";
}

.mdi-call-to-action:before {
  content: "\ue06c";
}

.mdi-camera:before {
  content: "\ue3af";
}

.mdi-camera-alt:before {
  content: "\ue3b0";
}

.mdi-camera-enhance:before {
  content: "\ue8fc";
}

.mdi-camera-front:before {
  content: "\ue3b1";
}

.mdi-camera-rear:before {
  content: "\ue3b2";
}

.mdi-camera-roll:before {
  content: "\ue3b3";
}

.mdi-cancel:before {
  content: "\ue5c9";
}

.mdi-card-giftcard:before {
  content: "\ue8f6";
}

.mdi-card-membership:before {
  content: "\ue8f7";
}

.mdi-card-travel:before {
  content: "\ue8f8";
}

.mdi-casino:before {
  content: "\ueb40";
}

.mdi-cast:before {
  content: "\ue307";
}

.mdi-cast-connected:before {
  content: "\ue308";
}

.mdi-center-focus-strong:before {
  content: "\ue3b4";
}

.mdi-center-focus-weak:before {
  content: "\ue3b5";
}

.mdi-change-history:before {
  content: "\ue86b";
}

.mdi-chat:before {
  content: "\ue0b7";
}

.mdi-chat-bubble:before {
  content: "\ue0ca";
}

.mdi-chat-bubble-outline:before {
  content: "\ue0cb";
}

.mdi-check:before {
  content: "\ue5ca";
}

.mdi-check-box:before {
  content: "\ue834";
}

.mdi-check-box-outline-blank:before {
  content: "\ue835";
}

.mdi-check-circle:before {
  content: "\ue86c";
}

.mdi-chevron-left:before {
  content: "\ue5cb";
}

.mdi-chevron-right:before {
  content: "\ue5cc";
}

.mdi-child-care:before {
  content: "\ueb41";
}

.mdi-child-friendly:before {
  content: "\ueb42";
}

.mdi-chrome-reader-mode:before {
  content: "\ue86d";
}

.mdi-class:before {
  content: "\ue86e";
}

.mdi-clear:before {
  content: "\ue14c";
}

.mdi-clear-all:before {
  content: "\ue0b8";
}

.mdi-close:before {
  content: "\ue5cd";
}

.mdi-closed-caption:before {
  content: "\ue01c";
}

.mdi-cloud:before {
  content: "\ue2bd";
}

.mdi-cloud-circle:before {
  content: "\ue2be";
}

.mdi-cloud-done:before {
  content: "\ue2bf";
}

.mdi-cloud-download:before {
  content: "\ue2c0";
}

.mdi-cloud-off:before {
  content: "\ue2c1";
}

.mdi-cloud-queue:before {
  content: "\ue2c2";
}

.mdi-cloud-upload:before {
  content: "\ue2c3";
}

.mdi-code:before {
  content: "\ue86f";
}

.mdi-collections:before {
  content: "\ue3b6";
}

.mdi-collections-bookmark:before {
  content: "\ue431";
}

.mdi-color-lens:before {
  content: "\ue3b7";
}

.mdi-colorize:before {
  content: "\ue3b8";
}

.mdi-comment:before {
  content: "\ue0b9";
}

.mdi-compare:before {
  content: "\ue3b9";
}

.mdi-compare-arrows:before {
  content: "\ue915";
}

.mdi-computer:before {
  content: "\ue30a";
}

.mdi-confirmation-number:before {
  content: "\ue638";
}

.mdi-contact-mail:before {
  content: "\ue0d0";
}

.mdi-contact-phone:before {
  content: "\ue0cf";
}

.mdi-contacts:before {
  content: "\ue0ba";
}

.mdi-content-copy:before {
  content: "\ue14d";
}

.mdi-content-cut:before {
  content: "\ue14e";
}

.mdi-content-paste:before {
  content: "\ue14f";
}

.mdi-control-point:before {
  content: "\ue3ba";
}

.mdi-control-point-duplicate:before {
  content: "\ue3bb";
}

.mdi-copyright:before {
  content: "\ue90c";
}

.mdi-create:before {
  content: "\ue150";
}

.mdi-create-new-folder:before {
  content: "\ue2cc";
}

.mdi-credit-card:before {
  content: "\ue870";
}

.mdi-crop:before {
  content: "\ue3be";
}

.mdi-crop-16-9:before {
  content: "\ue3bc";
}

.mdi-crop-3-2:before {
  content: "\ue3bd";
}

.mdi-crop-5-4:before {
  content: "\ue3bf";
}

.mdi-crop-7-5:before {
  content: "\ue3c0";
}

.mdi-crop-din:before {
  content: "\ue3c1";
}

.mdi-crop-free:before {
  content: "\ue3c2";
}

.mdi-crop-landscape:before {
  content: "\ue3c3";
}

.mdi-crop-original:before {
  content: "\ue3c4";
}

.mdi-crop-portrait:before {
  content: "\ue3c5";
}

.mdi-crop-rotate:before {
  content: "\ue437";
}

.mdi-crop-square:before {
  content: "\ue3c6";
}

.mdi-dashboard:before {
  content: "\ue871";
}

.mdi-data-usage:before {
  content: "\ue1af";
}

.mdi-date-range:before {
  content: "\ue916";
}

.mdi-dehaze:before {
  content: "\ue3c7";
}

.mdi-delete:before {
  content: "\ue872";
}

.mdi-delete-forever:before {
  content: "\ue92b";
}

.mdi-delete-sweep:before {
  content: "\ue16c";
}

.mdi-description:before {
  content: "\ue873";
}

.mdi-desktop-mac:before {
  content: "\ue30b";
}

.mdi-desktop-windows:before {
  content: "\ue30c";
}

.mdi-details:before {
  content: "\ue3c8";
}

.mdi-developer-board:before {
  content: "\ue30d";
}

.mdi-developer-mode:before {
  content: "\ue1b0";
}

.mdi-device-hub:before {
  content: "\ue335";
}

.mdi-devices:before {
  content: "\ue1b1";
}

.mdi-devices-other:before {
  content: "\ue337";
}

.mdi-dialer-sip:before {
  content: "\ue0bb";
}

.mdi-dialpad:before {
  content: "\ue0bc";
}

.mdi-directions:before {
  content: "\ue52e";
}

.mdi-directions-bike:before {
  content: "\ue52f";
}

.mdi-directions-boat:before {
  content: "\ue532";
}

.mdi-directions-bus:before {
  content: "\ue530";
}

.mdi-directions-car:before {
  content: "\ue531";
}

.mdi-directions-railway:before {
  content: "\ue534";
}

.mdi-directions-run:before {
  content: "\ue566";
}

.mdi-directions-subway:before {
  content: "\ue533";
}

.mdi-directions-transit:before {
  content: "\ue535";
}

.mdi-directions-walk:before {
  content: "\ue536";
}

.mdi-disc-full:before {
  content: "\ue610";
}

.mdi-dns:before {
  content: "\ue875";
}

.mdi-do-not-disturb:before {
  content: "\ue612";
}

.mdi-do-not-disturb-alt:before {
  content: "\ue611";
}

.mdi-do-not-disturb-off:before {
  content: "\ue643";
}

.mdi-do-not-disturb-on:before {
  content: "\ue644";
}

.mdi-dock:before {
  content: "\ue30e";
}

.mdi-domain:before {
  content: "\ue7ee";
}

.mdi-done:before {
  content: "\ue876";
}

.mdi-done-all:before {
  content: "\ue877";
}

.mdi-donut-large:before {
  content: "\ue917";
}

.mdi-donut-small:before {
  content: "\ue918";
}

.mdi-drafts:before {
  content: "\ue151";
}

.mdi-drag-handle:before {
  content: "\ue25d";
}

.mdi-drive-eta:before {
  content: "\ue613";
}

.mdi-dvr:before {
  content: "\ue1b2";
}

.mdi-edit:before {
  content: "\ue3c9";
}

.mdi-edit-location:before {
  content: "\ue568";
}

.mdi-eject:before {
  content: "\ue8fb";
}

.mdi-email:before {
  content: "\ue0be";
}

.mdi-enhanced-encryption:before {
  content: "\ue63f";
}

.mdi-equalizer:before {
  content: "\ue01d";
}

.mdi-error:before {
  content: "\ue000";
}

.mdi-error-outline:before {
  content: "\ue001";
}

.mdi-euro-symbol:before {
  content: "\ue926";
}

.mdi-ev-station:before {
  content: "\ue56d";
}

.mdi-event:before {
  content: "\ue878";
}

.mdi-event-available:before {
  content: "\ue614";
}

.mdi-event-busy:before {
  content: "\ue615";
}

.mdi-event-note:before {
  content: "\ue616";
}

.mdi-event-seat:before {
  content: "\ue903";
}

.mdi-exit-to-app:before {
  content: "\ue879";
}

.mdi-expand-less:before {
  content: "\ue5ce";
}

.mdi-expand-more:before {
  content: "\ue5cf";
}

.mdi-explicit:before {
  content: "\ue01e";
}

.mdi-explore:before {
  content: "\ue87a";
}

.mdi-exposure:before {
  content: "\ue3ca";
}

.mdi-exposure-neg-1:before {
  content: "\ue3cb";
}

.mdi-exposure-neg-2:before {
  content: "\ue3cc";
}

.mdi-exposure-plus-1:before {
  content: "\ue3cd";
}

.mdi-exposure-plus-2:before {
  content: "\ue3ce";
}

.mdi-exposure-zero:before {
  content: "\ue3cf";
}

.mdi-extension:before {
  content: "\ue87b";
}

.mdi-face:before {
  content: "\ue87c";
}

.mdi-fast-forward:before {
  content: "\ue01f";
}

.mdi-fast-rewind:before {
  content: "\ue020";
}

.mdi-favorite:before {
  content: "\ue87d";
}

.mdi-favorite-border:before {
  content: "\ue87e";
}

.mdi-featured-play-list:before {
  content: "\ue06d";
}

.mdi-featured-video:before {
  content: "\ue06e";
}

.mdi-feedback:before {
  content: "\ue87f";
}

.mdi-fiber-dvr:before {
  content: "\ue05d";
}

.mdi-fiber-manual-record:before {
  content: "\ue061";
}

.mdi-fiber-new:before {
  content: "\ue05e";
}

.mdi-fiber-pin:before {
  content: "\ue06a";
}

.mdi-fiber-smart-record:before {
  content: "\ue062";
}

.mdi-file-download:before {
  content: "\ue2c4";
}

.mdi-file-upload:before {
  content: "\ue2c6";
}

.mdi-filter:before {
  content: "\ue3d3";
}

.mdi-filter-1:before {
  content: "\ue3d0";
}

.mdi-filter-2:before {
  content: "\ue3d1";
}

.mdi-filter-3:before {
  content: "\ue3d2";
}

.mdi-filter-4:before {
  content: "\ue3d4";
}

.mdi-filter-5:before {
  content: "\ue3d5";
}

.mdi-filter-6:before {
  content: "\ue3d6";
}

.mdi-filter-7:before {
  content: "\ue3d7";
}

.mdi-filter-8:before {
  content: "\ue3d8";
}

.mdi-filter-9:before {
  content: "\ue3d9";
}

.mdi-filter-9-plus:before {
  content: "\ue3da";
}

.mdi-filter-b-and-w:before {
  content: "\ue3db";
}

.mdi-filter-center-focus:before {
  content: "\ue3dc";
}

.mdi-filter-drama:before {
  content: "\ue3dd";
}

.mdi-filter-frames:before {
  content: "\ue3de";
}

.mdi-filter-hdr:before {
  content: "\ue3df";
}

.mdi-filter-list:before {
  content: "\ue152";
}

.mdi-filter-none:before {
  content: "\ue3e0";
}

.mdi-filter-tilt-shift:before {
  content: "\ue3e2";
}

.mdi-filter-vintage:before {
  content: "\ue3e3";
}

.mdi-find-in-page:before {
  content: "\ue880";
}

.mdi-find-replace:before {
  content: "\ue881";
}

.mdi-fingerprint:before {
  content: "\ue90d";
}

.mdi-first-page:before {
  content: "\ue5dc";
}

.mdi-fitness-center:before {
  content: "\ueb43";
}

.mdi-flag:before {
  content: "\ue153";
}

.mdi-flare:before {
  content: "\ue3e4";
}

.mdi-flash-auto:before {
  content: "\ue3e5";
}

.mdi-flash-off:before {
  content: "\ue3e6";
}

.mdi-flash-on:before {
  content: "\ue3e7";
}

.mdi-flight:before {
  content: "\ue539";
}

.mdi-flight-land:before {
  content: "\ue904";
}

.mdi-flight-takeoff:before {
  content: "\ue905";
}

.mdi-flip:before {
  content: "\ue3e8";
}

.mdi-flip-to-back:before {
  content: "\ue882";
}

.mdi-flip-to-front:before {
  content: "\ue883";
}

.mdi-folder:before {
  content: "\ue2c7";
}

.mdi-folder-open:before {
  content: "\ue2c8";
}

.mdi-folder-shared:before {
  content: "\ue2c9";
}

.mdi-folder-special:before {
  content: "\ue617";
}

.mdi-font-download:before {
  content: "\ue167";
}

.mdi-format-align-center:before {
  content: "\ue234";
}

.mdi-format-align-justify:before {
  content: "\ue235";
}

.mdi-format-align-left:before {
  content: "\ue236";
}

.mdi-format-align-right:before {
  content: "\ue237";
}

.mdi-format-bold:before {
  content: "\ue238";
}

.mdi-format-clear:before {
  content: "\ue239";
}

.mdi-format-color-fill:before {
  content: "\ue23a";
}

.mdi-format-color-reset:before {
  content: "\ue23b";
}

.mdi-format-color-text:before {
  content: "\ue23c";
}

.mdi-format-indent-decrease:before {
  content: "\ue23d";
}

.mdi-format-indent-increase:before {
  content: "\ue23e";
}

.mdi-format-italic:before {
  content: "\ue23f";
}

.mdi-format-line-spacing:before {
  content: "\ue240";
}

.mdi-format-list-bulleted:before {
  content: "\ue241";
}

.mdi-format-list-numbered:before {
  content: "\ue242";
}

.mdi-format-paint:before {
  content: "\ue243";
}

.mdi-format-quote:before {
  content: "\ue244";
}

.mdi-format-shapes:before {
  content: "\ue25e";
}

.mdi-format-size:before {
  content: "\ue245";
}

.mdi-format-strikethrough:before {
  content: "\ue246";
}

.mdi-format-textdirection-l-to-r:before {
  content: "\ue247";
}

.mdi-format-textdirection-r-to-l:before {
  content: "\ue248";
}

.mdi-format-underlined:before {
  content: "\ue249";
}

.mdi-forum:before {
  content: "\ue0bf";
}

.mdi-forward:before {
  content: "\ue154";
}

.mdi-forward-10:before {
  content: "\ue056";
}

.mdi-forward-30:before {
  content: "\ue057";
}

.mdi-forward-5:before {
  content: "\ue058";
}

.mdi-free-breakfast:before {
  content: "\ueb44";
}

.mdi-fullscreen:before {
  content: "\ue5d0";
}

.mdi-fullscreen-exit:before {
  content: "\ue5d1";
}

.mdi-functions:before {
  content: "\ue24a";
}

.mdi-g-translate:before {
  content: "\ue927";
}

.mdi-gamepad:before {
  content: "\ue30f";
}

.mdi-games:before {
  content: "\ue021";
}

.mdi-gavel:before {
  content: "\ue90e";
}

.mdi-gesture:before {
  content: "\ue155";
}

.mdi-get-app:before {
  content: "\ue884";
}

.mdi-gif:before {
  content: "\ue908";
}

.mdi-golf-course:before {
  content: "\ueb45";
}

.mdi-gps-fixed:before {
  content: "\ue1b3";
}

.mdi-gps-not-fixed:before {
  content: "\ue1b4";
}

.mdi-gps-off:before {
  content: "\ue1b5";
}

.mdi-grade:before {
  content: "\ue885";
}

.mdi-gradient:before {
  content: "\ue3e9";
}

.mdi-grain:before {
  content: "\ue3ea";
}

.mdi-graphic-eq:before {
  content: "\ue1b8";
}

.mdi-grid-off:before {
  content: "\ue3eb";
}

.mdi-grid-on:before {
  content: "\ue3ec";
}

.mdi-group:before {
  content: "\ue7ef";
}

.mdi-group-add:before {
  content: "\ue7f0";
}

.mdi-group-work:before {
  content: "\ue886";
}

.mdi-hd:before {
  content: "\ue052";
}

.mdi-hdr-off:before {
  content: "\ue3ed";
}

.mdi-hdr-on:before {
  content: "\ue3ee";
}

.mdi-hdr-strong:before {
  content: "\ue3f1";
}

.mdi-hdr-weak:before {
  content: "\ue3f2";
}

.mdi-headset:before {
  content: "\ue310";
}

.mdi-headset-mic:before {
  content: "\ue311";
}

.mdi-healing:before {
  content: "\ue3f3";
}

.mdi-hearing:before {
  content: "\ue023";
}

.mdi-help:before {
  content: "\ue887";
}

.mdi-help-outline:before {
  content: "\ue8fd";
}

.mdi-high-quality:before {
  content: "\ue024";
}

.mdi-highlight:before {
  content: "\ue25f";
}

.mdi-highlight-off:before {
  content: "\ue888";
}

.mdi-history:before {
  content: "\ue889";
}

.mdi-home:before {
  content: "\ue88a";
}

.mdi-hot-tub:before {
  content: "\ueb46";
}

.mdi-hotel:before {
  content: "\ue53a";
}

.mdi-hourglass-empty:before {
  content: "\ue88b";
}

.mdi-hourglass-full:before {
  content: "\ue88c";
}

.mdi-http:before {
  content: "\ue902";
}

.mdi-https:before {
  content: "\ue88d";
}

.mdi-image:before {
  content: "\ue3f4";
}

.mdi-image-aspect-ratio:before {
  content: "\ue3f5";
}

.mdi-import-contacts:before {
  content: "\ue0e0";
}

.mdi-import-export:before {
  content: "\ue0c3";
}

.mdi-important-devices:before {
  content: "\ue912";
}

.mdi-inbox:before {
  content: "\ue156";
}

.mdi-indeterminate-check-box:before {
  content: "\ue909";
}

.mdi-info:before {
  content: "\ue88e";
}

.mdi-info-outline:before {
  content: "\ue88f";
}

.mdi-input:before {
  content: "\ue890";
}

.mdi-insert-chart:before {
  content: "\ue24b";
}

.mdi-insert-comment:before {
  content: "\ue24c";
}

.mdi-insert-drive-file:before {
  content: "\ue24d";
}

.mdi-insert-emoticon:before {
  content: "\ue24e";
}

.mdi-insert-invitation:before {
  content: "\ue24f";
}

.mdi-insert-link:before {
  content: "\ue250";
}

.mdi-insert-photo:before {
  content: "\ue251";
}

.mdi-invert-colors:before {
  content: "\ue891";
}

.mdi-invert-colors-off:before {
  content: "\ue0c4";
}

.mdi-iso:before {
  content: "\ue3f6";
}

.mdi-keyboard:before {
  content: "\ue312";
}

.mdi-keyboard-arrow-down:before {
  content: "\ue313";
}

.mdi-keyboard-arrow-left:before {
  content: "\ue314";
}

.mdi-keyboard-arrow-right:before {
  content: "\ue315";
}

.mdi-keyboard-arrow-up:before {
  content: "\ue316";
}

.mdi-keyboard-backspace:before {
  content: "\ue317";
}

.mdi-keyboard-capslock:before {
  content: "\ue318";
}

.mdi-keyboard-hide:before {
  content: "\ue31a";
}

.mdi-keyboard-return:before {
  content: "\ue31b";
}

.mdi-keyboard-tab:before {
  content: "\ue31c";
}

.mdi-keyboard-voice:before {
  content: "\ue31d";
}

.mdi-kitchen:before {
  content: "\ueb47";
}

.mdi-label:before {
  content: "\ue892";
}

.mdi-label-outline:before {
  content: "\ue893";
}

.mdi-landscape:before {
  content: "\ue3f7";
}

.mdi-language:before {
  content: "\ue894";
}

.mdi-laptop:before {
  content: "\ue31e";
}

.mdi-laptop-chromebook:before {
  content: "\ue31f";
}

.mdi-laptop-mac:before {
  content: "\ue320";
}

.mdi-laptop-windows:before {
  content: "\ue321";
}

.mdi-last-page:before {
  content: "\ue5dd";
}

.mdi-launch:before {
  content: "\ue895";
}

.mdi-layers:before {
  content: "\ue53b";
}

.mdi-layers-clear:before {
  content: "\ue53c";
}

.mdi-leak-add:before {
  content: "\ue3f8";
}

.mdi-leak-remove:before {
  content: "\ue3f9";
}

.mdi-lens:before {
  content: "\ue3fa";
}

.mdi-library-add:before {
  content: "\ue02e";
}

.mdi-library-books:before {
  content: "\ue02f";
}

.mdi-library-music:before {
  content: "\ue030";
}

.mdi-lightbulb-outline:before {
  content: "\ue90f";
}

.mdi-line-style:before {
  content: "\ue919";
}

.mdi-line-weight:before {
  content: "\ue91a";
}

.mdi-linear-scale:before {
  content: "\ue260";
}

.mdi-link:before {
  content: "\ue157";
}

.mdi-linked-camera:before {
  content: "\ue438";
}

.mdi-list:before {
  content: "\ue896";
}

.mdi-live-help:before {
  content: "\ue0c6";
}

.mdi-live-tv:before {
  content: "\ue639";
}

.mdi-local-activity:before {
  content: "\ue53f";
}

.mdi-local-airport:before {
  content: "\ue53d";
}

.mdi-local-atm:before {
  content: "\ue53e";
}

.mdi-local-bar:before {
  content: "\ue540";
}

.mdi-local-cafe:before {
  content: "\ue541";
}

.mdi-local-car-wash:before {
  content: "\ue542";
}

.mdi-local-convenience-store:before {
  content: "\ue543";
}

.mdi-local-dining:before {
  content: "\ue556";
}

.mdi-local-drink:before {
  content: "\ue544";
}

.mdi-local-florist:before {
  content: "\ue545";
}

.mdi-local-gas-station:before {
  content: "\ue546";
}

.mdi-local-grocery-store:before {
  content: "\ue547";
}

.mdi-local-hospital:before {
  content: "\ue548";
}

.mdi-local-hotel:before {
  content: "\ue549";
}

.mdi-local-laundry-service:before {
  content: "\ue54a";
}

.mdi-local-library:before {
  content: "\ue54b";
}

.mdi-local-mall:before {
  content: "\ue54c";
}

.mdi-local-movies:before {
  content: "\ue54d";
}

.mdi-local-offer:before {
  content: "\ue54e";
}

.mdi-local-parking:before {
  content: "\ue54f";
}

.mdi-local-pharmacy:before {
  content: "\ue550";
}

.mdi-local-phone:before {
  content: "\ue551";
}

.mdi-local-pizza:before {
  content: "\ue552";
}

.mdi-local-play:before {
  content: "\ue553";
}

.mdi-local-post-office:before {
  content: "\ue554";
}

.mdi-local-printshop:before {
  content: "\ue555";
}

.mdi-local-see:before {
  content: "\ue557";
}

.mdi-local-shipping:before {
  content: "\ue558";
}

.mdi-local-taxi:before {
  content: "\ue559";
}

.mdi-location-city:before {
  content: "\ue7f1";
}

.mdi-location-disabled:before {
  content: "\ue1b6";
}

.mdi-location-off:before {
  content: "\ue0c7";
}

.mdi-location-on:before {
  content: "\ue0c8";
}

.mdi-location-searching:before {
  content: "\ue1b7";
}

.mdi-lock:before {
  content: "\ue897";
}

.mdi-lock-open:before {
  content: "\ue898";
}

.mdi-lock-outline:before {
  content: "\ue899";
}

.mdi-looks:before {
  content: "\ue3fc";
}

.mdi-looks-3:before {
  content: "\ue3fb";
}

.mdi-looks-4:before {
  content: "\ue3fd";
}

.mdi-looks-5:before {
  content: "\ue3fe";
}

.mdi-looks-6:before {
  content: "\ue3ff";
}

.mdi-looks-one:before {
  content: "\ue400";
}

.mdi-looks-two:before {
  content: "\ue401";
}

.mdi-loop:before {
  content: "\ue028";
}

.mdi-loupe:before {
  content: "\ue402";
}

.mdi-low-priority:before {
  content: "\ue16d";
}

.mdi-loyalty:before {
  content: "\ue89a";
}

.mdi-mail:before {
  content: "\ue158";
}

.mdi-mail-outline:before {
  content: "\ue0e1";
}

.mdi-map:before {
  content: "\ue55b";
}

.mdi-markunread:before {
  content: "\ue159";
}

.mdi-markunread-mailbox:before {
  content: "\ue89b";
}

.mdi-memory:before {
  content: "\ue322";
}

.mdi-menu:before {
  content: "\ue5d2";
}

.mdi-merge-type:before {
  content: "\ue252";
}

.mdi-message:before {
  content: "\ue0c9";
}

.mdi-mic:before {
  content: "\ue029";
}

.mdi-mic-none:before {
  content: "\ue02a";
}

.mdi-mic-off:before {
  content: "\ue02b";
}

.mdi-mms:before {
  content: "\ue618";
}

.mdi-mode-comment:before {
  content: "\ue253";
}

.mdi-mode-edit:before {
  content: "\ue254";
}

.mdi-monetization-on:before {
  content: "\ue263";
}

.mdi-money-off:before {
  content: "\ue25c";
}

.mdi-monochrome-photos:before {
  content: "\ue403";
}

.mdi-mood:before {
  content: "\ue7f2";
}

.mdi-mood-bad:before {
  content: "\ue7f3";
}

.mdi-more:before {
  content: "\ue619";
}

.mdi-more-horiz:before {
  content: "\ue5d3";
}

.mdi-more-vert:before {
  content: "\ue5d4";
}

.mdi-motorcycle:before {
  content: "\ue91b";
}

.mdi-mouse:before {
  content: "\ue323";
}

.mdi-move-to-inbox:before {
  content: "\ue168";
}

.mdi-movie:before {
  content: "\ue02c";
}

.mdi-movie-creation:before {
  content: "\ue404";
}

.mdi-movie-filter:before {
  content: "\ue43a";
}

.mdi-multiline-chart:before {
  content: "\ue6df";
}

.mdi-music-note:before {
  content: "\ue405";
}

.mdi-music-video:before {
  content: "\ue063";
}

.mdi-my-location:before {
  content: "\ue55c";
}

.mdi-nature:before {
  content: "\ue406";
}

.mdi-nature-people:before {
  content: "\ue407";
}

.mdi-navigate-before:before {
  content: "\ue408";
}

.mdi-navigate-next:before {
  content: "\ue409";
}

.mdi-navigation:before {
  content: "\ue55d";
}

.mdi-near-me:before {
  content: "\ue569";
}

.mdi-network-cell:before {
  content: "\ue1b9";
}

.mdi-network-check:before {
  content: "\ue640";
}

.mdi-network-locked:before {
  content: "\ue61a";
}

.mdi-network-wifi:before {
  content: "\ue1ba";
}

.mdi-new-releases:before {
  content: "\ue031";
}

.mdi-next-week:before {
  content: "\ue16a";
}

.mdi-nfc:before {
  content: "\ue1bb";
}

.mdi-no-encryption:before {
  content: "\ue641";
}

.mdi-no-sim:before {
  content: "\ue0cc";
}

.mdi-not-interested:before {
  content: "\ue033";
}

.mdi-note:before {
  content: "\ue06f";
}

.mdi-note-add:before {
  content: "\ue89c";
}

.mdi-notifications:before {
  content: "\ue7f4";
}

.mdi-notifications-active:before {
  content: "\ue7f7";
}

.mdi-notifications-none:before {
  content: "\ue7f5";
}

.mdi-notifications-off:before {
  content: "\ue7f6";
}

.mdi-notifications-paused:before {
  content: "\ue7f8";
}

.mdi-offline-pin:before {
  content: "\ue90a";
}

.mdi-ondemand-video:before {
  content: "\ue63a";
}

.mdi-opacity:before {
  content: "\ue91c";
}

.mdi-open-in-browser:before {
  content: "\ue89d";
}

.mdi-open-in-new:before {
  content: "\ue89e";
}

.mdi-open-with:before {
  content: "\ue89f";
}

.mdi-pages:before {
  content: "\ue7f9";
}

.mdi-pageview:before {
  content: "\ue8a0";
}

.mdi-palette:before {
  content: "\ue40a";
}

.mdi-pan-tool:before {
  content: "\ue925";
}

.mdi-panorama:before {
  content: "\ue40b";
}

.mdi-panorama-fish-eye:before {
  content: "\ue40c";
}

.mdi-panorama-horizontal:before {
  content: "\ue40d";
}

.mdi-panorama-vertical:before {
  content: "\ue40e";
}

.mdi-panorama-wide-angle:before {
  content: "\ue40f";
}

.mdi-party-mode:before {
  content: "\ue7fa";
}

.mdi-pause:before {
  content: "\ue034";
}

.mdi-pause-circle-filled:before {
  content: "\ue035";
}

.mdi-pause-circle-outline:before {
  content: "\ue036";
}

.mdi-payment:before {
  content: "\ue8a1";
}

.mdi-people:before {
  content: "\ue7fb";
}

.mdi-people-outline:before {
  content: "\ue7fc";
}

.mdi-perm-camera-mic:before {
  content: "\ue8a2";
}

.mdi-perm-contact-calendar:before {
  content: "\ue8a3";
}

.mdi-perm-data-setting:before {
  content: "\ue8a4";
}

.mdi-perm-device-information:before {
  content: "\ue8a5";
}

.mdi-perm-identity:before {
  content: "\ue8a6";
}

.mdi-perm-media:before {
  content: "\ue8a7";
}

.mdi-perm-phone-msg:before {
  content: "\ue8a8";
}

.mdi-perm-scan-wifi:before {
  content: "\ue8a9";
}

.mdi-person:before {
  content: "\ue7fd";
}

.mdi-person-add:before {
  content: "\ue7fe";
}

.mdi-person-outline:before {
  content: "\ue7ff";
}

.mdi-person-pin:before {
  content: "\ue55a";
}

.mdi-person-pin-circle:before {
  content: "\ue56a";
}

.mdi-personal-video:before {
  content: "\ue63b";
}

.mdi-pets:before {
  content: "\ue91d";
}

.mdi-phone:before {
  content: "\ue0cd";
}

.mdi-phone-android:before {
  content: "\ue324";
}

.mdi-phone-bluetooth-speaker:before {
  content: "\ue61b";
}

.mdi-phone-forwarded:before {
  content: "\ue61c";
}

.mdi-phone-in-talk:before {
  content: "\ue61d";
}

.mdi-phone-iphone:before {
  content: "\ue325";
}

.mdi-phone-locked:before {
  content: "\ue61e";
}

.mdi-phone-missed:before {
  content: "\ue61f";
}

.mdi-phone-paused:before {
  content: "\ue620";
}

.mdi-phonelink:before {
  content: "\ue326";
}

.mdi-phonelink-erase:before {
  content: "\ue0db";
}

.mdi-phonelink-lock:before {
  content: "\ue0dc";
}

.mdi-phonelink-off:before {
  content: "\ue327";
}

.mdi-phonelink-ring:before {
  content: "\ue0dd";
}

.mdi-phonelink-setup:before {
  content: "\ue0de";
}

.mdi-photo:before {
  content: "\ue410";
}

.mdi-photo-album:before {
  content: "\ue411";
}

.mdi-photo-camera:before {
  content: "\ue412";
}

.mdi-photo-filter:before {
  content: "\ue43b";
}

.mdi-photo-library:before {
  content: "\ue413";
}

.mdi-photo-size-select-actual:before {
  content: "\ue432";
}

.mdi-photo-size-select-large:before {
  content: "\ue433";
}

.mdi-photo-size-select-small:before {
  content: "\ue434";
}

.mdi-picture-as-pdf:before {
  content: "\ue415";
}

.mdi-picture-in-picture:before {
  content: "\ue8aa";
}

.mdi-picture-in-picture-alt:before {
  content: "\ue911";
}

.mdi-pie-chart:before {
  content: "\ue6c4";
}

.mdi-pie-chart-outlined:before {
  content: "\ue6c5";
}

.mdi-pin-drop:before {
  content: "\ue55e";
}

.mdi-place:before {
  content: "\ue55f";
}

.mdi-play-arrow:before {
  content: "\ue037";
}

.mdi-play-circle-filled:before {
  content: "\ue038";
}

.mdi-play-circle-outline:before {
  content: "\ue039";
}

.mdi-play-for-work:before {
  content: "\ue906";
}

.mdi-playlist-add:before {
  content: "\ue03b";
}

.mdi-playlist-add-check:before {
  content: "\ue065";
}

.mdi-playlist-play:before {
  content: "\ue05f";
}

.mdi-plus-one:before {
  content: "\ue800";
}

.mdi-poll:before {
  content: "\ue801";
}

.mdi-polymer:before {
  content: "\ue8ab";
}

.mdi-pool:before {
  content: "\ueb48";
}

.mdi-portable-wifi-off:before {
  content: "\ue0ce";
}

.mdi-portrait:before {
  content: "\ue416";
}

.mdi-power:before {
  content: "\ue63c";
}

.mdi-power-input:before {
  content: "\ue336";
}

.mdi-power-settings-new:before {
  content: "\ue8ac";
}

.mdi-pregnant-woman:before {
  content: "\ue91e";
}

.mdi-present-to-all:before {
  content: "\ue0df";
}

.mdi-print:before {
  content: "\ue8ad";
}

.mdi-priority-high:before {
  content: "\ue645";
}

.mdi-public:before {
  content: "\ue80b";
}

.mdi-publish:before {
  content: "\ue255";
}

.mdi-query-builder:before {
  content: "\ue8ae";
}

.mdi-question-answer:before {
  content: "\ue8af";
}

.mdi-queue:before {
  content: "\ue03c";
}

.mdi-queue-music:before {
  content: "\ue03d";
}

.mdi-queue-play-next:before {
  content: "\ue066";
}

.mdi-radio:before {
  content: "\ue03e";
}

.mdi-radio-button-checked:before {
  content: "\ue837";
}

.mdi-radio-button-unchecked:before {
  content: "\ue836";
}

.mdi-rate-review:before {
  content: "\ue560";
}

.mdi-receipt:before {
  content: "\ue8b0";
}

.mdi-recent-actors:before {
  content: "\ue03f";
}

.mdi-record-voice-over:before {
  content: "\ue91f";
}

.mdi-redeem:before {
  content: "\ue8b1";
}

.mdi-redo:before {
  content: "\ue15a";
}

.mdi-refresh:before {
  content: "\ue5d5";
}

.mdi-remove:before {
  content: "\ue15b";
}

.mdi-remove-circle:before {
  content: "\ue15c";
}

.mdi-remove-circle-outline:before {
  content: "\ue15d";
}

.mdi-remove-from-queue:before {
  content: "\ue067";
}

.mdi-remove-red-eye:before {
  content: "\ue417";
}

.mdi-remove-shopping-cart:before {
  content: "\ue928";
}

.mdi-reorder:before {
  content: "\ue8fe";
}

.mdi-repeat:before {
  content: "\ue040";
}

.mdi-repeat-one:before {
  content: "\ue041";
}

.mdi-replay:before {
  content: "\ue042";
}

.mdi-replay-10:before {
  content: "\ue059";
}

.mdi-replay-30:before {
  content: "\ue05a";
}

.mdi-replay-5:before {
  content: "\ue05b";
}

.mdi-reply:before {
  content: "\ue15e";
}

.mdi-reply-all:before {
  content: "\ue15f";
}

.mdi-report:before {
  content: "\ue160";
}

.mdi-report-problem:before {
  content: "\ue8b2";
}

.mdi-restaurant:before {
  content: "\ue56c";
}

.mdi-restaurant-menu:before {
  content: "\ue561";
}

.mdi-restore:before {
  content: "\ue8b3";
}

.mdi-restore-page:before {
  content: "\ue929";
}

.mdi-ring-volume:before {
  content: "\ue0d1";
}

.mdi-room:before {
  content: "\ue8b4";
}

.mdi-room-service:before {
  content: "\ueb49";
}

.mdi-rotate-90-degrees-ccw:before {
  content: "\ue418";
}

.mdi-rotate-left:before {
  content: "\ue419";
}

.mdi-rotate-right:before {
  content: "\ue41a";
}

.mdi-rounded-corner:before {
  content: "\ue920";
}

.mdi-router:before {
  content: "\ue328";
}

.mdi-rowing:before {
  content: "\ue921";
}

.mdi-rss-feed:before {
  content: "\ue0e5";
}

.mdi-rv-hookup:before {
  content: "\ue642";
}

.mdi-satellite:before {
  content: "\ue562";
}

.mdi-save:before {
  content: "\ue161";
}

.mdi-scanner:before {
  content: "\ue329";
}

.mdi-schedule:before {
  content: "\ue8b5";
}

.mdi-school:before {
  content: "\ue80c";
}

.mdi-screen-lock-landscape:before {
  content: "\ue1be";
}

.mdi-screen-lock-portrait:before {
  content: "\ue1bf";
}

.mdi-screen-lock-rotation:before {
  content: "\ue1c0";
}

.mdi-screen-rotation:before {
  content: "\ue1c1";
}

.mdi-screen-share:before {
  content: "\ue0e2";
}

.mdi-sd-card:before {
  content: "\ue623";
}

.mdi-sd-storage:before {
  content: "\ue1c2";
}

.mdi-search:before {
  content: "\ue8b6";
}

.mdi-security:before {
  content: "\ue32a";
}

.mdi-select-all:before {
  content: "\ue162";
}

.mdi-send:before {
  content: "\ue163";
}

.mdi-sentiment-dissatisfied:before {
  content: "\ue811";
}

.mdi-sentiment-neutral:before {
  content: "\ue812";
}

.mdi-sentiment-satisfied:before {
  content: "\ue813";
}

.mdi-sentiment-very-dissatisfied:before {
  content: "\ue814";
}

.mdi-sentiment-very-satisfied:before {
  content: "\ue815";
}

.mdi-settings:before {
  content: "\ue8b8";
}

.mdi-settings-applications:before {
  content: "\ue8b9";
}

.mdi-settings-backup-restore:before {
  content: "\ue8ba";
}

.mdi-settings-bluetooth:before {
  content: "\ue8bb";
}

.mdi-settings-brightness:before {
  content: "\ue8bd";
}

.mdi-settings-cell:before {
  content: "\ue8bc";
}

.mdi-settings-ethernet:before {
  content: "\ue8be";
}

.mdi-settings-input-antenna:before {
  content: "\ue8bf";
}

.mdi-settings-input-component:before {
  content: "\ue8c0";
}

.mdi-settings-input-composite:before {
  content: "\ue8c1";
}

.mdi-settings-input-hdmi:before {
  content: "\ue8c2";
}

.mdi-settings-input-svideo:before {
  content: "\ue8c3";
}

.mdi-settings-overscan:before {
  content: "\ue8c4";
}

.mdi-settings-phone:before {
  content: "\ue8c5";
}

.mdi-settings-power:before {
  content: "\ue8c6";
}

.mdi-settings-remote:before {
  content: "\ue8c7";
}

.mdi-settings-system-daydream:before {
  content: "\ue1c3";
}

.mdi-settings-voice:before {
  content: "\ue8c8";
}

.mdi-share:before {
  content: "\ue80d";
}

.mdi-shop:before {
  content: "\ue8c9";
}

.mdi-shop-two:before {
  content: "\ue8ca";
}

.mdi-shopping-basket:before {
  content: "\ue8cb";
}

.mdi-shopping-cart:before {
  content: "\ue8cc";
}

.mdi-short-text:before {
  content: "\ue261";
}

.mdi-show-chart:before {
  content: "\ue6e1";
}

.mdi-shuffle:before {
  content: "\ue043";
}

.mdi-signal-cellular-4-bar:before {
  content: "\ue1c8";
}

.mdi-signal-cellular-connected-no-internet-4-bar:before {
  content: "\ue1cd";
}

.mdi-signal-cellular-no-sim:before {
  content: "\ue1ce";
}

.mdi-signal-cellular-null:before {
  content: "\ue1cf";
}

.mdi-signal-cellular-off:before {
  content: "\ue1d0";
}

.mdi-signal-wifi-4-bar:before {
  content: "\ue1d8";
}

.mdi-signal-wifi-4-bar-lock:before {
  content: "\ue1d9";
}

.mdi-signal-wifi-off:before {
  content: "\ue1da";
}

.mdi-sim-card:before {
  content: "\ue32b";
}

.mdi-sim-card-alert:before {
  content: "\ue624";
}

.mdi-skip-next:before {
  content: "\ue044";
}

.mdi-skip-previous:before {
  content: "\ue045";
}

.mdi-slideshow:before {
  content: "\ue41b";
}

.mdi-slow-motion-video:before {
  content: "\ue068";
}

.mdi-smartphone:before {
  content: "\ue32c";
}

.mdi-smoke-free:before {
  content: "\ueb4a";
}

.mdi-smoking-rooms:before {
  content: "\ueb4b";
}

.mdi-sms:before {
  content: "\ue625";
}

.mdi-sms-failed:before {
  content: "\ue626";
}

.mdi-snooze:before {
  content: "\ue046";
}

.mdi-sort:before {
  content: "\ue164";
}

.mdi-sort-by-alpha:before {
  content: "\ue053";
}

.mdi-spa:before {
  content: "\ueb4c";
}

.mdi-space-bar:before {
  content: "\ue256";
}

.mdi-speaker:before {
  content: "\ue32d";
}

.mdi-speaker-group:before {
  content: "\ue32e";
}

.mdi-speaker-notes:before {
  content: "\ue8cd";
}

.mdi-speaker-notes-off:before {
  content: "\ue92a";
}

.mdi-speaker-phone:before {
  content: "\ue0d2";
}

.mdi-spellcheck:before {
  content: "\ue8ce";
}

.mdi-star:before {
  content: "\ue838";
}

.mdi-star-border:before {
  content: "\ue83a";
}

.mdi-star-half:before {
  content: "\ue839";
}

.mdi-stars:before {
  content: "\ue8d0";
}

.mdi-stay-current-landscape:before {
  content: "\ue0d3";
}

.mdi-stay-current-portrait:before {
  content: "\ue0d4";
}

.mdi-stay-primary-landscape:before {
  content: "\ue0d5";
}

.mdi-stay-primary-portrait:before {
  content: "\ue0d6";
}

.mdi-stop:before {
  content: "\ue047";
}

.mdi-stop-screen-share:before {
  content: "\ue0e3";
}

.mdi-storage:before {
  content: "\ue1db";
}

.mdi-store:before {
  content: "\ue8d1";
}

.mdi-store-mall-directory:before {
  content: "\ue563";
}

.mdi-straighten:before {
  content: "\ue41c";
}

.mdi-streetview:before {
  content: "\ue56e";
}

.mdi-strikethrough-s:before {
  content: "\ue257";
}

.mdi-style:before {
  content: "\ue41d";
}

.mdi-subdirectory-arrow-left:before {
  content: "\ue5d9";
}

.mdi-subdirectory-arrow-right:before {
  content: "\ue5da";
}

.mdi-subject:before {
  content: "\ue8d2";
}

.mdi-subscriptions:before {
  content: "\ue064";
}

.mdi-subtitles:before {
  content: "\ue048";
}

.mdi-subway:before {
  content: "\ue56f";
}

.mdi-supervisor-account:before {
  content: "\ue8d3";
}

.mdi-surround-sound:before {
  content: "\ue049";
}

.mdi-swap-calls:before {
  content: "\ue0d7";
}

.mdi-swap-horiz:before {
  content: "\ue8d4";
}

.mdi-swap-vert:before {
  content: "\ue8d5";
}

.mdi-swap-vertical-circle:before {
  content: "\ue8d6";
}

.mdi-switch-camera:before {
  content: "\ue41e";
}

.mdi-switch-video:before {
  content: "\ue41f";
}

.mdi-sync:before {
  content: "\ue627";
}

.mdi-sync-disabled:before {
  content: "\ue628";
}

.mdi-sync-problem:before {
  content: "\ue629";
}

.mdi-system-update:before {
  content: "\ue62a";
}

.mdi-system-update-alt:before {
  content: "\ue8d7";
}

.mdi-tab:before {
  content: "\ue8d8";
}

.mdi-tab-unselected:before {
  content: "\ue8d9";
}

.mdi-tablet:before {
  content: "\ue32f";
}

.mdi-tablet-android:before {
  content: "\ue330";
}

.mdi-tablet-mac:before {
  content: "\ue331";
}

.mdi-tag-faces:before {
  content: "\ue420";
}

.mdi-tap-and-play:before {
  content: "\ue62b";
}

.mdi-terrain:before {
  content: "\ue564";
}

.mdi-text-fields:before {
  content: "\ue262";
}

.mdi-text-format:before {
  content: "\ue165";
}

.mdi-textsms:before {
  content: "\ue0d8";
}

.mdi-texture:before {
  content: "\ue421";
}

.mdi-theaters:before {
  content: "\ue8da";
}

.mdi-thumb-down:before {
  content: "\ue8db";
}

.mdi-thumb-up:before {
  content: "\ue8dc";
}

.mdi-thumbs-up-down:before {
  content: "\ue8dd";
}

.mdi-time-to-leave:before {
  content: "\ue62c";
}

.mdi-timelapse:before {
  content: "\ue422";
}

.mdi-timeline:before {
  content: "\ue922";
}

.mdi-timer:before {
  content: "\ue425";
}

.mdi-timer-10:before {
  content: "\ue423";
}

.mdi-timer-3:before {
  content: "\ue424";
}

.mdi-timer-off:before {
  content: "\ue426";
}

.mdi-title:before {
  content: "\ue264";
}

.mdi-toc:before {
  content: "\ue8de";
}

.mdi-today:before {
  content: "\ue8df";
}

.mdi-toll:before {
  content: "\ue8e0";
}

.mdi-tonality:before {
  content: "\ue427";
}

.mdi-touch-app:before {
  content: "\ue913";
}

.mdi-toys:before {
  content: "\ue332";
}

.mdi-track-changes:before {
  content: "\ue8e1";
}

.mdi-traffic:before {
  content: "\ue565";
}

.mdi-train:before {
  content: "\ue570";
}

.mdi-tram:before {
  content: "\ue571";
}

.mdi-transfer-within-a-station:before {
  content: "\ue572";
}

.mdi-transform:before {
  content: "\ue428";
}

.mdi-translate:before {
  content: "\ue8e2";
}

.mdi-trending-down:before {
  content: "\ue8e3";
}

.mdi-trending-flat:before {
  content: "\ue8e4";
}

.mdi-trending-up:before {
  content: "\ue8e5";
}

.mdi-tune:before {
  content: "\ue429";
}

.mdi-turned-in:before {
  content: "\ue8e6";
}

.mdi-turned-in-not:before {
  content: "\ue8e7";
}

.mdi-tv:before {
  content: "\ue333";
}

.mdi-unarchive:before {
  content: "\ue169";
}

.mdi-undo:before {
  content: "\ue166";
}

.mdi-unfold-less:before {
  content: "\ue5d6";
}

.mdi-unfold-more:before {
  content: "\ue5d7";
}

.mdi-update:before {
  content: "\ue923";
}

.mdi-usb:before {
  content: "\ue1e0";
}

.mdi-verified-user:before {
  content: "\ue8e8";
}

.mdi-vertical-align-bottom:before {
  content: "\ue258";
}

.mdi-vertical-align-center:before {
  content: "\ue259";
}

.mdi-vertical-align-top:before {
  content: "\ue25a";
}

.mdi-vibration:before {
  content: "\ue62d";
}

.mdi-video-call:before {
  content: "\ue070";
}

.mdi-video-label:before {
  content: "\ue071";
}

.mdi-video-library:before {
  content: "\ue04a";
}

.mdi-videocam:before {
  content: "\ue04b";
}

.mdi-videocam-off:before {
  content: "\ue04c";
}

.mdi-videogame-asset:before {
  content: "\ue338";
}

.mdi-view-agenda:before {
  content: "\ue8e9";
}

.mdi-view-array:before {
  content: "\ue8ea";
}

.mdi-view-carousel:before {
  content: "\ue8eb";
}

.mdi-view-column:before {
  content: "\ue8ec";
}

.mdi-view-comfy:before {
  content: "\ue42a";
}

.mdi-view-compact:before {
  content: "\ue42b";
}

.mdi-view-day:before {
  content: "\ue8ed";
}

.mdi-view-headline:before {
  content: "\ue8ee";
}

.mdi-view-list:before {
  content: "\ue8ef";
}

.mdi-view-module:before {
  content: "\ue8f0";
}

.mdi-view-quilt:before {
  content: "\ue8f1";
}

.mdi-view-stream:before {
  content: "\ue8f2";
}

.mdi-view-week:before {
  content: "\ue8f3";
}

.mdi-vignette:before {
  content: "\ue435";
}

.mdi-visibility:before {
  content: "\ue8f4";
}

.mdi-visibility-off:before {
  content: "\ue8f5";
}

.mdi-voice-chat:before {
  content: "\ue62e";
}

.mdi-voicemail:before {
  content: "\ue0d9";
}

.mdi-volume-down:before {
  content: "\ue04d";
}

.mdi-volume-mute:before {
  content: "\ue04e";
}

.mdi-volume-off:before {
  content: "\ue04f";
}

.mdi-volume-up:before {
  content: "\ue050";
}

.mdi-vpn-key:before {
  content: "\ue0da";
}

.mdi-vpn-lock:before {
  content: "\ue62f";
}

.mdi-wallpaper:before {
  content: "\ue1bc";
}

.mdi-warning:before {
  content: "\ue002";
}

.mdi-watch:before {
  content: "\ue334";
}

.mdi-watch-later:before {
  content: "\ue924";
}

.mdi-wb-auto:before {
  content: "\ue42c";
}

.mdi-wb-cloudy:before {
  content: "\ue42d";
}

.mdi-wb-incandescent:before {
  content: "\ue42e";
}

.mdi-wb-iridescent:before {
  content: "\ue436";
}

.mdi-wb-sunny:before {
  content: "\ue430";
}

.mdi-wc:before {
  content: "\ue63d";
}

.mdi-web:before {
  content: "\ue051";
}

.mdi-web-asset:before {
  content: "\ue069";
}

.mdi-weekend:before {
  content: "\ue16b";
}

.mdi-whatshot:before {
  content: "\ue80e";
}

.mdi-widgets:before {
  content: "\ue1bd";
}

.mdi-wifi:before {
  content: "\ue63e";
}

.mdi-wifi-lock:before {
  content: "\ue1e1";
}

.mdi-wifi-tethering:before {
  content: "\ue1e2";
}

.mdi-work:before {
  content: "\ue8f9";
}

.mdi-wrap-text:before {
  content: "\ue25b";
}

.mdi-youtube-searched-for:before {
  content: "\ue8fa";
}

.mdi-zoom-in:before {
  content: "\ue8ff";
}

.mdi-zoom-out:before {
  content: "\ue900";
}

.mdi-zoom-out-map:before {
  content: "\ue56b";
}

[IOS] : Font Awesome 5 PRO - Light icon always displayed as solid

Hi,

On Android work as expected.

On IOSall Lighticon are dispalyed as solid

RESULT :

Css file located in app/fontawesome.css

In app.ts:

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

TNSFontIcon.debug = false;
TNSFontIcon.paths = {
  'fa': 'fontawesome.css'
};
TNSFontIcon.loadCss();

In app/fonts :

In app/_app-common.scss :

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url("~/fonts/fa-light-300.ttf") format("truetype")}

.fa {
  font-family: Font Awesome 5 Pro, fa-light-300;
  font-weight: 300;
}

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  src: url("~/fonts/fa-solid-900.ttf") format("truetype")}

.fas {
  font-family: Font Awesome 5 Pro, fa-solid-900;
  font-weight: 900;
}

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  src: url("~/fonts/fa-regular-400.ttf") format("truetype")}

.far {
  font-family: Font Awesome 5 Pro, fa-regular-400;
}

Thank you :-)

Updating the ion-icons library to version 2

Hello,

I am trying to update the ion-icons library to version 2, with no luck so far. I downloaded the version 2 ttf and replaced the ionicons.css but that seems to be not enough.. Any hints on how to do it ?

Thank you for this library.

Problem with Icomoon iconfonts

It works fine with ion and font-awesome but, as I tried to make use of my custom font icon it keeps on returning some character I dont even know of any help would be great. Thanks in anticipation

update to Nativescript 3

first error is Property 'resources' does not exist

Is there a Javascript version of this?

Trying to use this, but we're not using typescript or angular, so I wondered how this could be written as Javascript:

import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
'fa': 'font-awesome.css',
'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });

Using with angular 4

How can I configure this in angular + ns?

import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });

Some icons work, some icons do not...

I have been trying to figure this out, but SOME icons display just great and others do not, seems almost random to me. Tried creating a minimal CSS with only the icons I am using thinking maybe it was an issue with too many in the FontAwesome 5 Pro library. Same results with a complete or minimal CSS file. For example if I have the following:

            <Label class="fas" text="" />
            <FontIcon size="24" type="fas" name="fa-signal" />

The Label has the Unicode Glyph copied from the FontAwesome web site it will display the label version just fine but the FontIcon tag does not render, just empty space where it should be. If I replace it wit fa-at and the associated glyph then both of them display just fine.

This is Android if it matters and FontAwesome 5.8.1 font files. I have tried various other versions as well looking for a solution. This is driving me crazy! Any help would be appreciated.

Icon with text

Thank you for this job.

I have one question. When we use the syntax like this:
<GridLayout class="drawer-content"> <StackLayout class="fa"> <Label text="&#xf015; Home" tap="navigate" class="{{ selectedPage == 'home' ? 'selected' : '' }}" ></Label> </StackLayout> </GridLayout>

The icon is rendered with the text but when I use this solution:

<GridLayout class="drawer-content"> <StackLayout class="fa"> <Label text="{{'fa-home' | fonticon}} Home" tap="navigate" class="{{ selectedPage == 'home' ? 'selected' : '' }}" ></Label> </StackLayout> </GridLayout>

The icon is not rendered. How can I do to render the icon with your solution?

Thanks

how to integrate with scss

Hi I am using nativescript vue and want to integrate fontawesome can anyone help me please.
I download fontawesome-webfont.ttf and kept inside ~/fonts
also added following lines to \app\app.scss

@font-face {
  font-family: "font-awesome";
  src: url("~/fonts/fontawesome-webfont.ttf") format("truetype");
}

and in code I am using

<Button text="&#f006;" class="font-awesome" />```

why (fa-spin it's not working

animated (fa-spin) it's not working
<Label class="fa" :text="'fa-sync fa-spin' | fonticon" />
please help me

Javascript Implementation Issues

I added the Javascript code to my app.js file and followed the instructions, however, I am getting this error:
file:///app/app.js:16:22: JS ERROR TypeError: undefined is not an object (evaluating 'application.resources['fonticon'] = fonticon')

Here is the code for my app.js file:

require("./bundle-config");
var application = require('application');
var fiAll = require('nativescript-fonticon');
var TNSFontIcon = fiAll.TNSFontIcon;
var fonticon = fiAll.fonticon;

TNSFontIcon.debug = true; // Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
'fa': 'font-awesome.css',
'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'app-root/app-root' });

I also named the font awesome ttf file "fontawesome-webfont.ttf". Thanks!

[Nativescript-Vue] nativescript-fonticon v2 - update guide

Hi, I cannot make this plugin works when using its version 2. I'm trying to follow [https://nativescript-vue.org/blog/using-fonticons/](this tutorial: https://nativescript-vue.org/blog/using-fonticons/) with no success. Any thoughts?

[Nativescript-Vue] Font Awesome 5, it show [Question Mark]

Main.js:

// i use import show JS ERROR SyntaxError: Importing binding name 'TNSFontIcon' is not found.

const {TNSFontIcon, fonticon} = require('nativescript-fonticon'); 
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
    'fa': './font-awesome.css'
};
TNSFontIcon.loadCss();

Vue:

<Label class="fa">{{'fa-yahoo' | fonticon}} Search</Label>

fontawesome ttf file path:
app/fonts/webfont-fontawesome.ttf

fontawesome all.css path:
app/font-awesome.css

Editted:

@font-face {
  font-family: 'Font Awesome 5 Brands, fa-brands-400';
  font-style: normal;
  font-weight: normal;
  src: url("./fonts/fa-brands-400.ttf") format("truetype"); }

.fab {
  font-family: 'Font Awesome 5 Brands, fa-brands-400'; }
@font-face {
  font-family: 'Font Awesome 5 Free, fa-regular-400';
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/fa-regular-400.ttf") format("truetype"); }

.far {
  font-family: 'Font Awesome 5 Free, fa-regular-400';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free, fa-solid-900';
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/fa-solid-900.ttf") format("truetype"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free, fa-solid-900';
  font-weight: 900; }

tns run ios console::

...
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-table-tennis: \\uf45d'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tablet: \\uf10a'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tablet-alt: \\uf3fa'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tablets: \\uf490'
CONSOLE LOG file:///app/tns_modules/nativescript-fonticon/nativescript-fonticon.js:35:40: 'fa-tachometer-alt: \\uf3fd'
...