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.
Like this:
Like Loading...