Not all icons available by loading Iconifont.font?

Expo SDK
1

In the default tab navigator app i’m attempting to make a new screen.
In the MainTabNavigator.js i choose the icon name “dashboard” which is available from four different icon sets.
https://expo.github.io/vector-icons/

I get the error below complaining it is not a valid icon name.

Warning: Failed prop type: Invalid prop `name` of value `dashboard` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-add-outline","ios-alarm","ios-alarm-outline","ios-albums","ios-albums-outline","ios-alert","ios-alert-outline","ios-american-football","ios-american-football-outline","ios-analytics","ios-analytics-outline","ios-aperture","ios-aperture-outline","ios-apps","ios-apps-outline","ios-appstore","ios-appstore-outline","ios-archive","ios-archive-outline","ios-arrow-back","ios-arrow-back-outline","ios-arrow-down","ios-arrow-down-outline","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropdown-circle-outline","ios-arrow-dropdown-outline","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropleft-circle-outline","ios-arrow-dropleft-outline","ios-arrow-dropright","ios-arrow-dropright-circle","ios-arrow-dropright-circle-outline","ios-arrow-dropright-outline","ios-arrow-dropup","ios-arrow-dropup-circle","ios-arrow-dropup-circle-outline","ios-arrow-dropup-outline","ios-arrow-forward","ios-arrow-forward-outline","ios-arrow-round-back","ios-arrow-round-back-outline","ios-arrow-round-down","ios-arrow-round-down-outline","ios-arrow-round-forward","ios-arrow-round-forward-outline","ios-arrow-round-up","ios-arrow-round-up-outline","ios-arrow-up","ios-arrow-up-outline","ios-at","ios-at-outline","ios-attach","ios-attach-outline","ios-backspace","ios-backspace-outline","ios-barcode","ios-barcode-outline","ios-baseball","ios-baseball-outline","ios-basket","ios-basket-outline","ios-basketball","ios-basketball-outline","ios-battery-charging","ios-battery-charging-outline","ios-battery-dead","ios-battery-dead-outline","ios-battery-full","ios-battery-full-outline","ios-beaker","ios-beaker-outline","ios-beer","ios-beer-outline","ios-bicycle","ios-bicycle-outline","ios-bluetooth","ios-bluetooth-outline","ios-boat","ios-boat-outline","ios-body","ios-body-outline","ios-bonfire","ios-bonfire-outline","ios-book","ios-book-outline","ios-bookmark","ios-bookmark-outline","ios-bookmarks","ios-bookmarks-outline","ios-bowtie","ios-bowtie-outline","ios-briefcase","ios-briefcase-outline","ios-browsers","ios-browsers-outline","ios-brush","ios-brush-outline","ios-bug","ios-bug-outline","ios-build","ios-build-outline","ios-bulb","ios-bulb-outline","ios-bus","ios-bus-outline","ios-cafe","ios-cafe-outline","ios-calculator","ios-calculator-outline","ios-calendar","ios-calendar-outline","ios-call","ios-call-outline","ios-camera","ios-camera-outline","ios-car","ios-car-outline","ios-card","ios-card-outline","ios-cart","ios-cart-outline","ios-cash","ios-cash-outline","ios-chatboxes","ios-chatboxes-outline","ios-chatbubbles","ios-chatbubbles-outline","ios-checkbox","ios-checkbox-outline","ios-checkmark","ios-checkmark-circle","ios-checkmark-circle-outline","ios-checkmark-outline","ios-clipboard","ios-clipboard-outline","ios-clock","ios-clock-outline","ios-close","ios-close-circle","ios-close-circle-outline","ios-close-outline","ios-closed-captioning","ios-closed-captioning-outline","ios-cloud","ios-cloud-circle","ios-cloud-circle-outline","ios-cloud-done","ios-cloud-done-outline","ios-cloud-download","ios-cloud-download-outline","ios-cloud-outline","ios-cloud-upload","ios-cloud-upload-outline","ios-cloudy","ios-cloudy-night","ios-cloudy-night-outline","ios-cloudy-outline","ios-code","ios-code-download","ios-code-download-outline","ios-code-outline","ios-code-working","ios-code-working-outline","ios-cog","ios-cog-outline","ios-color-fill","ios-color-fill-outline","ios-color-filter","ios-color-filter-outline","ios-color-palette","ios-color-palette-outline","ios-color-wand","ios-color-wand-outline","ios-compass","ios-compass-outline","ios-construct","ios-construct-outline","ios-contact","ios-contact-outline","ios-contacts","ios-contacts-outline","ios-contract","ios-contract-outline","ios-contrast","ios-contrast-outline","ios-copy","ios-copy-outline","ios-create","ios-create-outline","ios-crop","ios-crop-outline","ios-cube","ios-cube-outline","ios-cut","ios-cut-outline","ios-desktop","ios-desktop-outline","ios-disc","ios-disc-outline","ios-document","ios-document-outline","ios-done-all","ios-done-all-outline","ios-download","ios-download-outline","ios-easel","ios-easel-outline","ios-egg","ios-egg-outline","ios-exit","ios-exit-outline","ios-expand","ios-expand-outline","ios-eye","ios-eye-off","ios-eye-off-outline","ios-eye-outline","ios-fastforward","ios-fastforward-outline","ios-female","ios-female-outline","ios-filing","ios-filing-outline","ios-film","ios-film-outline","ios-finger-print","ios-finger-print-outline","ios-flag","ios-flag-outline","ios-flame","ios-flame-outline","ios-flash","ios-flash-outline","ios-flask","ios-flask-outline","ios-flower","ios-flower-outline","ios-folder","ios-folder-open","ios-folder-open-outline","ios-folder-outline","ios-football","ios-football-outline","ios-funnel","ios-funnel-outline","ios-game-controller-a","ios-game-controller-a-outline","ios-game-controller-b","ios-game-controller-b-outline","ios-git-branch","ios-git-branch-outline","ios-git-commit","ios-git-commit-outline","ios-git-compare","ios-git-compare-outline","ios-git-merge","ios-git-merge-outline","ios-git-network","ios-git-network-outline","ios-git-pull-request","ios-git-pull-request-outline","ios-glasses","ios-glasses-outline","ios-globe","ios-globe-outline","ios-grid","ios-grid-outline","ios-hammer","ios-hammer-outline","ios-hand","ios-hand-outline","ios-happy","ios-happy-outline","ios-headset","ios-headset-outline","ios-heart","ios-heart-outline","ios-help","ios-help-buoy","ios-help-buoy-outline","ios-help-circle","ios-help-circle-outline","ios-help-outline","ios-home","ios-home-outline","ios-ice-cream","ios-ice-cream-outline","ios-image","ios-image-outline","ios-images","ios-images-outline","ios-infinite","ios-infinite-outline","ios-information","ios-information-circle","ios-information-circle-outline","ios-information-outline","ios-ionic","ios-ionic-outline","ios-ionitron","ios-ionitron-outline","ios-jet","ios-jet-outline","ios-key","ios-key-outline","ios-keypad","ios-keypad-outline","ios-laptop","ios-laptop-outline","ios-leaf","ios-leaf-outline","ios-link","ios-link-outline","ios-list","ios-list-box","ios-list-box-outline","ios-list-outline","ios-locate","ios-locate-outline","ios-lock","ios-lock-outline","ios-log-in","ios-log-in-outline","ios-log-out","ios-log-out-outline","ios-magnet","ios-magnet-outline","ios-mail","ios-mail-open","ios-mail-open-outline","ios-mail-outline","ios-male","ios-male-outline","ios-man","ios-man-outline","ios-map","ios-map-outline","ios-medal","ios-medal-outline","ios-medical","ios-medical-outline","ios-medkit","ios-medkit-outline","ios-megaphone","ios-megaphone-outline","ios-menu","ios-menu-outline","ios-mic","ios-mic-off","ios-mic-off-outline","ios-mic-outline","ios-microphone","ios-microphone-outline","ios-moon","ios-moon-outline","ios-more","ios-more-outline","ios-move","ios-move-outline","ios-musical-note","ios-musical-note-outline","ios-musical-notes","ios-musical-notes-outline","ios-navigate","ios-navigate-outline","ios-no-smoking","ios-no-smoking-outline","ios-notifications","ios-notifications-off","ios-notifications-off-outline","ios-notifications-outline","ios-nuclear","ios-nuclear-outline","ios-nutrition","ios-nutrition-outline","ios-open","ios-open-outline","ios-options","ios-options-outline","ios-outlet","ios-outlet-outline","ios-paper","ios-paper-outline","ios-paper-plane","ios-paper-plane-outline","ios-partly-sunny","ios-partly-sunny-outline","ios-pause","ios-pause-outline","ios-paw","ios-paw-outline","ios-people","ios-people-outline","ios-person","ios-person-add","ios-person-add-outline","ios-person-outline","ios-phone-landscape","ios-phone-landscape-outline","ios-phone-portrait","ios-phone-portrait-outline","ios-photos","ios-photos-outline","ios-pie","ios-pie-outline","ios-pin","ios-pin-outline","ios-pint","ios-pint-outline","ios-pizza","ios-pizza-outline","ios-plane","ios-plane-outline","ios-planet","ios-planet-outline","ios-play","ios-play-outline","ios-podium","ios-podium-outline","ios-power","ios-power-outline","ios-pricetag","ios-pricetag-outline","ios-pricetags","ios-pricetags-outline","ios-print","ios-print-outline","ios-pulse","ios-pulse-outline","ios-qr-scanner","ios-qr-scanner-outline","ios-quote","ios-quote-outline","ios-radio","ios-radio-button-off","ios-radio-button-off-outline","ios-radio-button-on","ios-radio-button-on-outline","ios-radio-outline","ios-rainy","ios-rainy-outline","ios-recording","ios-recording-outline","ios-redo","ios-redo-outline","ios-refresh","ios-refresh-circle","ios-refresh-circle-outline","ios-refresh-outline","ios-remove","ios-remove-circle","ios-remove-circle-outline","ios-remove-outline","ios-reorder","ios-reorder-outline","ios-repeat","ios-repeat-outline","ios-resize","ios-resize-outline","ios-restaurant","ios-restaurant-outline","ios-return-left","ios-return-left-outline","ios-return-right","ios-return-right-outline","ios-reverse-camera","ios-reverse-camera-outline","ios-rewind","ios-rewind-outline","ios-ribbon","ios-ribbon-outline","ios-rose","ios-rose-outline","ios-sad","ios-sad-outline","ios-school","ios-school-outline","ios-search","ios-search-outline","ios-send","ios-send-outline","ios-settings","ios-settings-outline","ios-share","ios-share-alt","ios-share-alt-outline","ios-share-outline","ios-shirt","ios-shirt-outline","ios-shuffle","ios-shuffle-outline","ios-skip-backward","ios-skip-backward-outline","ios-skip-forward","ios-skip-forward-outline","ios-snow","ios-snow-outline","ios-speedometer","ios-speedometer-outline","ios-square","ios-square-outline","ios-star","ios-star-half","ios-star-half-outline","ios-star-outline","ios-stats","ios-stats-outline","ios-stopwatch","ios-stopwatch-outline","ios-subway","ios-subway-outline","ios-sunny","ios-sunny-outline","ios-swap","ios-swap-outline","ios-switch","ios-switch-outline","ios-sync","ios-sync-outline","ios-tablet-landscape","ios-tablet-landscape-outline","ios-tablet-portrait","ios-tablet-portrait-outline","ios-tennisball","ios-tennisball-outline","ios-text","ios-text-outline","ios-thermometer","ios-thermometer-outline","ios-thumbs-down","ios-thumbs-down-outline","ios-thumbs-up","ios-thumbs-up-outline","ios-thunderstorm","ios-thunderstorm-outline","ios-time","ios-time-outline","ios-timer","ios-timer-outline","ios-train","ios-train-outline","ios-transgender","ios-transgender-outline","ios-trash","ios-trash-outline","ios-trending-down","ios-trending-down-outline","ios-trending-up","ios-trending-up-outline","ios-trophy","ios-trophy-outline","ios-umbrella","ios-umbrella-outline","ios-undo","ios-undo-outline","ios-unlock","ios-unlock-outline","ios-videocam","ios-videocam-outline","ios-volume-down","ios-volume-down-outline","ios-volume-mute","ios-volume-mute-outline","ios-volume-off","ios-volume-off-outline","ios-volume-up","ios-volume-up-outline","ios-walk","ios-walk-outline","ios-warning","ios-warning-outline","ios-watch","ios-watch-outline","ios-water","ios-water-outline","ios-wifi","ios-wifi-outline","ios-wine","ios-wine-outline","ios-woman","ios-woman-outline","logo-android","logo-angular","logo-apple","logo-bitcoin","logo-buffer","logo-chrome","logo-codepen","logo-css3","logo-designernews","logo-dribbble","logo-dropbox","logo-euro","logo-facebook","logo-foursquare","logo-freebsd-devil","logo-github","logo-google","logo-googleplus","logo-hackernews","logo-html5","logo-instagram","logo-javascript","logo-linkedin","logo-markdown","logo-nodejs","logo-octocat","logo-pinterest","logo-playstation","logo-python","logo-reddit","logo-rss","logo-sass","logo-skype","logo-snapchat","logo-steam","logo-tumblr","logo-tux","logo-twitch","logo-twitter","logo-usd","logo-vimeo","logo-whatsapp","logo-windows","logo-wordpress","logo-xbox","logo-yahoo","logo-yen","logo-youtube","md-add","md-add-circle","md-alarm","md-albums","md-alert","md-american-football","md-analytics","md-aperture","md-apps","md-appstore","md-archive","md-arrow-back","md-arrow-down","md-arrow-dropdown","md-arrow-dropdown-circle","md-arrow-dropleft","md-arrow-dropleft-circle","md-arrow-dropright","md-arrow-dropright-circle","md-arrow-dropup","md-arrow-dropup-circle","md-arrow-forward","md-arrow-round-back","md-arrow-round-down","md-arrow-round-forward","md-arrow-round-up","md-arrow-up","md-at","md-attach","md-backspace","md-barcode","md-baseball","md-basket","md-basketball","md-battery-charging","md-battery-dead","md-battery-full","md-beaker","md-beer","md-bicycle","md-bluetooth","md-boat","md-body","md-bonfire","md-book","md-bookmark","md-bookmarks","md-bowtie","md-briefcase","md-browsers","md-brush","md-bug","md-build","md-bulb","md-bus","md-cafe","md-calculator","md-calendar","md-call","md-camera","md-car","md-card","md-cart","md-cash","md-chatboxes","md-chatbubbles","md-checkbox","md-checkbox-outline","md-checkmark","md-checkmark-circle","md-checkmark-circle-outline","md-clipboard","md-clock","md-close","md-close-circle","md-closed-captioning","md-cloud","md-cloud-circle","md-cloud-done","md-cloud-download","md-cloud-outline","md-cloud-upload","md-cloudy","md-cloudy-night","md-code","md-code-download","md-code-working","md-cog","md-color-fill","md-color-filter","md-color-palette","md-color-wand","md-compass","md-construct","md-contact","md-contacts","md-contract","md-contrast","md-copy","md-create","md-crop","md-cube","md-cut","md-desktop","md-disc","md-document","md-done-all","md-download","md-easel","md-egg","md-exit","md-expand","md-eye","md-eye-off","md-fastforward","md-female","md-filing","md-film","md-finger-print","md-flag","md-flame","md-flash","md-flask","md-flower","md-folder","md-folder-open","md-football","md-funnel","md-game-controller-a","md-game-controller-b","md-git-branch","md-git-commit","md-git-compare","md-git-merge","md-git-network","md-git-pull-request","md-glasses","md-globe","md-grid","md-hammer","md-hand","md-happy","md-headset","md-heart","md-heart-outline","md-help","md-help-buoy","md-help-circle","md-home","md-ice-cream","md-image","md-images","md-infinite","md-information","md-information-circle","md-ionic","md-ionitron","md-jet","md-key","md-keypad","md-laptop","md-leaf","md-link","md-list","md-list-box","md-locate","md-lock","md-log-in","md-log-out","md-magnet","md-mail","md-mail-open","md-male","md-man","md-map","md-medal","md-medical","md-medkit","md-megaphone","md-menu","md-mic","md-mic-off","md-microphone","md-moon","md-more","md-move","md-musical-note","md-musical-notes","md-navigate","md-no-smoking","md-notifications","md-notifications-off","md-notifications-outline","md-nuclear","md-nutrition","md-open","md-options","md-outlet","md-paper","md-paper-plane","md-partly-sunny","md-pause","md-paw","md-people","md-person","md-person-add","md-phone-landscape","md-phone-portrait","md-photos","md-pie","md-pin","md-pint","md-pizza","md-plane","md-planet","md-play","md-podium","md-power","md-pricetag","md-pricetags","md-print","md-pulse","md-qr-scanner","md-quote","md-radio","md-radio-button-off","md-radio-button-on","md-rainy","md-recording","md-redo","md-refresh","md-refresh-circle","md-remove","md-remove-circle","md-reorder","md-repeat","md-resize","md-restaurant","md-return-left","md-return-right","md-reverse-camera","md-rewind","md-ribbon","md-rose","md-sad","md-school","md-search","md-send","md-settings","md-share","md-share-alt","md-shirt","md-shuffle","md-skip-backward","md-skip-forward","md-snow","md-speedometer","md-square","md-square-outline","md-star","md-star-half","md-star-outline","md-stats","md-stopwatch","md-subway","md-sunny","md-swap","md-switch","md-sync","md-tablet-landscape","md-tablet-portrait","md-tennisball","md-text","md-thermometer","md-thumbs-down","md-thumbs-up","md-thunderstorm","md-time","md-timer","md-train","md-transgender","md-trash","md-trending-down","md-trending-up","md-trophy","md-umbrella","md-undo","md-unlock","md-videocam","md-volume-down","md-volume-mute","md-volume-off","md-volume-up","md-walk","md-warning","md-watch","md-water","md-wifi","md-wine","md-woman"]. //...... followed by stacktrace

I read the docs here
https://docs.expo.io/versions/v19.0.0/guides/icons.html
and it specifically says:

It includes eight icon sets, you can browse all of the icons using the @expo/vector-icons directory.

Is there something else i need to do to load icons from the other iconsets?

Do I need to manually load the ttf files in app.js?

2

Are you calling the icons like this: https://snack.expo.io/r1hOokpIW ?

3

Thanks for replying.

Should’ve been more clear. This is just from the default navigation tab app you can create from XDE.

From MainTabNavigator.js (example of what i tried):

{
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {          
          default:
            iconName = 'dashboard';
            break;
        }
        return (
          <Ionicons
            name={iconName}
            size={28}
            style={{ marginBottom: -3 }}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        );
      },
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }

Now that i’ve seen your example snack, it’s clear to me that I only have access to the Ionicons and not all of them. (I thought Ionicons was just what expo was calling the Icon component as opposed to the actual name of the iconset)

Might be worthwhile adding to the docs a simple code example like :

If you want to use icons from fontawesome or entypo icons sets, simply import and use them like:

import { Entypo, FontAwesome } from '@expo/vector-icons'; // 5.0.0
//......
<Entypo name="menu" size={32} color="red" />
<FontAwesome name="glass" size={32} color="green" />

Side question, is there an easy way to filter icons by iconset on Redirecting... that i’m not aware of?

1 Like
4

Unfortunately not, aside from scrolling to whatever icon set you’re using :confused:

5

I had the same issue as @wexpo and think his suggestion for adding to the docs could really clear up the confusion.