Do material design icons fail to show in your Cordova/Vue/Vuetify/Android application?

When developing an Android application using Cordova 8.0.0 with Vue and Vuetify, I noticed that the beautiful material design icons do not show as expected.

There were two problems.

Problem 1: ligature transformations in Android’s WebView

Ligature transformations did not work in Android’s WebView, so instead of icons one sees text strings.

To fix it, I had to substitute '' for 'keyboard_arrow_up' and similar substitutions for other icons. This list of icon names and the corresponding codepoints can help.

Problem 2: missing glyph indicators

After getting rid of the text strings, instead of beautiful icons I got missing glyph indicators.

Turns out that the css file generated by the build process (npm run build followed by cordova build android) expects the font files containing the icon glyphs to be found in android_asset/www/dist/static/css/static/fonts, but they were actually located in android_asset/www/dist/static/fonts.

The fix is to use a Cordova hook script to transform the relevant links in the css file.

There are two possible locations for the hook script.

  1. Drop it into the ./hooks/before_build/ subdirectory.
  2. Specify its location in ./config.xml.

I am not very experienced with the platform, so I chose the first location.
Due to a similar reason (inexperience with node scripts), I wrote it quickly as a /bin/bash shell script.
Here it is in its full glory:

echo ============================================
echo Fix paths to font files in Android css files.
echo ============================================
echo The relevant css files are: ${CSSFILES}
mkdir -p /tmp/fixcssfiles
rm -v /tmp/fixcssfiles/*
for cssfname in ${CSSFILES} ; do
  #cp ${cssfname} /tmp/fixcssfiles/`basename ${cssfname}`
  #                            # (Save a backup css file)
  sed 's=url(static/fonts/=url(../fonts/=g' < ${cssfname} \
                             > /tmp/fixcssfiles/tmpcssfname
  mv /tmp/fixcssfiles/tmpcssfname ${cssfname}
  echo Procssed ${cssfname}
echo ============================================

After adding the script, I got to see the material design icons when running the Android application.

Author: Omer Zak

I am deaf since birth. I played with big computers which eat punched cards and spew out printouts since age 12. Ever since they became available, I work and play with desktop size computers which eat keyboard keypresses and spew out display pixels. Among other things, I developed software which helped the deaf in Israel use the telephone network, by means of home computers equipped with modems. Several years later, I developed Hebrew localizations for some cellular phones, which helped the deaf in Israel utilize the cellular phone networks. I am interested in entrepreneurship, Science Fiction and making the world more accessible to people with disabilities.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: