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.
- Drop it into the
./hooks/before_build/subdirectory. - 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:
#/bin/bash
echo ============================================
echo Fix paths to font files in Android css files.
echo ============================================
CSSFILES=$1/www/dist/static/css/*.css
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}
done
echo ============================================
After adding the script, I got to see the material design icons when running the Android application.
