How to use custom incons?

Expo SDK
1

I am trying to use these icons in my React Native project. How can I load a custom icon font with Expo (or with anything else)?

Thanks!

Related StackOverflow question: link

2

Hi @nnorb93, all you need to do to get your icon font up and running is to use Font.loadAsync before you start your app. You can find all the information you get this up and running here: https://docs.expo.io/versions/v19.0.0/guides/using-custom-fonts.html

I used it like that in my App.js:

import React from 'react';
import { View, Text,}  from 'react-native';
import { Font, AppLoading, } from 'expo';

export default class App extends React.Component {
	constructor() {
		super();

		this.state = {
			fontLoaded: false,
		};
	}

	async componentDidMount() {
		await Font.loadAsync({
			'icons': require('./assets/fonts/icons.ttf'),
		});		
		this.setState({ fontLoaded: true });
	}
	// AppLoading will show the splashscreen as long as it takes to load your font
	render() {
		if(!this.state.fontLoaded){
			return <AppLoading />;
		}
		return (
			<View>
				<Text>You can use your icon font now</Text>
				<Text style={styles.icon}>iconCode</Text>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	icon: {
		color: Colors.white,
		fontFamily: 'icons',
		fontSize: 16,
	},
});
1 Like
3

Thanks for the answer @maximilian-ruppert! :slight_smile:

I tried this code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font, AppLoading } from 'expo';

export default class WeatherPage extends React.Component {

  constructor() {
    super();
    this.state = {
      fontLoaded: false
    };
  }

  async componentWillMount() {
    await Font.loadAsync({
      'weathericons': require('../../../assets/fonts/weathericons.ttf')
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    const { fontLoaded } = this.state;
    return fontLoaded ?
      <View style={styles.container}>
        <Text style={styles.icon}>f00d</Text>
      </View>
      :
      <AppLoading />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  icon: {
    color: '#25AAE2',
    fontFamily: 'weathericons',
    fontSize: 16
  }
});

Seems to be good, but not working. What did I miss? :thinking:

4

Without showing an error message or providing more information about your project setup it is hard to tell why it is not working.

Maybe your relative assets path is wrong? Are you loading WeatherPage as your first component?
I load my fonts before I show the user the actuall app (as I said), are you doing the same?

5

@maximilian-ruppert Sorry for the slowly response.
I created a simple project, where I tried to load the font. I didn’t get any error message. :smirk:
Here is the github repository: https://github.com/norbertnemeth/load-icons-expo

6

same here