The Material Design Icons project provides a CSS file that maps each icon to its own CSS class. The other, more pressing concern is the fact that we have to know the specific Unicode character that corresponds to any icon that we want to display. This complicates the situation if we need a button control that shows both icon(s), and text, for example, though we could define a custom QML control to address this. First, we can only access the icons from QML items that display text, such as the Text or Label element, or the Button control.
To actually use the icons in our application, we have to consider two implications of the choice to import them as a single font file, rather than as image resources. QFontDatabase::addApplicationFont(":/materialdesignicons-webfont.ttf") Įngine.load(QUrl(QLatin1String("qrc:/main.qml"))) QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling) If we started with the basic QML application template from Qt Creator, we could do this in the main.cpp file, as illustrated below: While the project caters primarily to Web apps, it provides a single font file (distributed in a handful of formats) that contains all the Material Design icons that Google has released, along with a number of community-made icons that complement the theme.Īdd the font file as a resource in our Qt project's QRC file, and register the font in the application's font database. Since I didn't want to import each icon as an individual image resource, I turned to the Material Design Icons font. The JavaScript portion is now MIT licensed, with the font file being distributed under the SIL Open Font License, to match the Material Design Icons project. I've also bundled the corresponding font file as well, for convenience. Update: : I've pushed a new version of this to GitHub, which includes definitions for all the icons available at the time of the update. Here's how I got the icon theme to work with Qt. When the Qt Project released Qt Quick Controls 2 with a new theme inspired by Google's Material Design guidelines, I felt like the look wouldn't be complete without the matching icon set.
0 kommentar(er)
