diff --git a/packages/core/ui/styling/style/index.ts b/packages/core/ui/styling/style/index.ts index 8002a4286..76fa3cf00 100644 --- a/packages/core/ui/styling/style/index.ts +++ b/packages/core/ui/styling/style/index.ts @@ -106,6 +106,7 @@ export class Style extends Observable { } public fontInternal: Font; + public iconFontFamily: string; /** * This property ensures inheritance of a11y scale among views. */ diff --git a/packages/core/ui/tab-view/index.android.ts b/packages/core/ui/tab-view/index.android.ts index cc8405311..bc7280144 100644 --- a/packages/core/ui/tab-view/index.android.ts +++ b/packages/core/ui/tab-view/index.android.ts @@ -9,6 +9,7 @@ import { Trace } from '../../trace'; import { Color } from '../../color'; import { fontSizeProperty, fontInternalProperty } from '../styling/style-properties'; import { RESOURCE_PREFIX, ad, layout } from '../../utils'; +import { FONT_PREFIX, isFontIconURI } from '../../utils/common'; import { Frame } from '../frame'; import { Application } from '../../application'; import { AndroidHelper } from '../core/view'; @@ -292,19 +293,31 @@ function createTabItemSpec(item: TabViewItem): org.nativescript.widgets.TabItemS result.title = item.title; if (item.iconSource) { - if (item.iconSource.indexOf(RESOURCE_PREFIX) === 0) { - result.iconId = ad.resources.getDrawableId(item.iconSource.substr(RESOURCE_PREFIX.length)); - if (result.iconId === 0) { - traceMissingIcon(item.iconSource); - } - } else { - const is = ImageSource.fromFileOrResourceSync(item.iconSource); + const addDrawable = (is: ImageSource) => { if (is) { // TODO: Make this native call that accepts string so that we don't load Bitmap in JS. result.iconDrawable = new android.graphics.drawable.BitmapDrawable(appResources, is.android); } else { traceMissingIcon(item.iconSource); } + }; + if (item.iconSource.indexOf(RESOURCE_PREFIX) === 0) { + result.iconId = ad.resources.getDrawableId(item.iconSource.slice(RESOURCE_PREFIX.length)); + if (result.iconId === 0) { + traceMissingIcon(item.iconSource); + } + } else if (isFontIconURI(item.iconSource)) { + // Allow specifying a separate font family for the icon via style.iconFontFamily. + let iconFont: any = item.style.fontInternal; + const iconFontFamily = item.iconFontFamily || item.style.iconFontFamily; + if (iconFontFamily) { + const baseFont = item.style.fontInternal || Font.default; + iconFont = baseFont.withFontFamily(iconFontFamily); + } + const is = ImageSource.fromFontIconCodeSync(item.iconSource.slice(FONT_PREFIX.length), iconFont, item.style.color); + addDrawable(is); + } else { + addDrawable(ImageSource.fromFileOrResourceSync(item.iconSource)); } } @@ -494,7 +507,7 @@ export class TabView extends TabViewBase { JSON.stringify([ { value: 1, type: 0 /* org.nativescript.widgets.GridUnitType.auto */ }, { value: 1, type: 2 /* org.nativescript.widgets.GridUnitType.star */ }, - ]) + ]), ); viewPager.setLayoutParams(lp); @@ -506,7 +519,7 @@ export class TabView extends TabViewBase { JSON.stringify([ { value: 1, type: 2 /* org.nativescript.widgets.GridUnitType.star */ }, { value: 1, type: 0 /* org.nativescript.widgets.GridUnitType.auto */ }, - ]) + ]), ); tabLayout.setLayoutParams(lp); viewPager.setSwipePageEnabled(false); diff --git a/packages/core/ui/tab-view/index.ios.ts b/packages/core/ui/tab-view/index.ios.ts index e23b06cd2..7680586c4 100644 --- a/packages/core/ui/tab-view/index.ios.ts +++ b/packages/core/ui/tab-view/index.ios.ts @@ -13,7 +13,7 @@ import { ImageSource } from '../../image-source'; import { profile } from '../../profiling'; import { Frame } from '../frame'; import { layout } from '../../utils/layout-helper'; -import { isFontIconURI, isSystemURI, SYSTEM_PREFIX } from '../../utils/common'; +import { FONT_PREFIX, isFontIconURI, isSystemURI, SYSTEM_PREFIX } from '../../utils/common'; import { SDK_VERSION } from '../../utils/constants'; import { Device } from '../../platform'; export * from './tab-view-common'; @@ -504,7 +504,16 @@ export class TabView extends TabViewBase { if (isSystemURI(item.iconSource)) { is = ImageSource.fromSystemImageSync(item.iconSource.slice(SYSTEM_PREFIX.length)); } else if (isFontIconURI(item.iconSource)) { - is = ImageSource.fromFontIconCodeSync(item.iconSource, item.style.fontInternal, item.style.color); + // Allow specifying a separate font family for the icon via style.iconFontFamily. + // If provided, construct a Font from the family and (optionally) size from fontInternal. + let iconFont = item.style.fontInternal; + const iconFontFamily = item.iconFontFamily || item.style.iconFontFamily; + if (iconFontFamily) { + // Preserve size/style from existing fontInternal if present. + const baseFont = item.style.fontInternal || Font.default; + iconFont = baseFont.withFontFamily(iconFontFamily); + } + is = ImageSource.fromFontIconCodeSync(item.iconSource.slice(FONT_PREFIX.length), iconFont, item.style.color); } else { is = ImageSource.fromFileOrResourceSync(item.iconSource); } diff --git a/packages/core/ui/tab-view/tab-view-common.ts b/packages/core/ui/tab-view/tab-view-common.ts index c4a06d0ce..75730e4a3 100644 --- a/packages/core/ui/tab-view/tab-view-common.ts +++ b/packages/core/ui/tab-view/tab-view-common.ts @@ -15,6 +15,7 @@ export abstract class TabViewItemBase extends ViewBase implements TabViewItemDef private _title = ''; private _view: View; private _iconSource: string; + iconFontFamily: string; get textTransform(): CoreTypes.TextTransformType { return this.style.textTransform; @@ -287,6 +288,12 @@ export const tabTextColorProperty = new CssProperty({ }); tabTextColorProperty.register(Style); +export const iconFontFamilyProperty = new CssProperty({ + name: 'iconFontFamily', + cssName: 'icon-font-family', +}); +iconFontFamilyProperty.register(Style); + export const tabBackgroundColorProperty = new CssProperty({ name: 'tabBackgroundColor', cssName: 'tab-background-color',