![]() Lead image is a screenshot of a sample QML application with Material Design icons. I've made the file available under the terms of the SIL Open Font License, version 1.1, to match the license of the Material Design Icons font. You can download the JavaScript object mentioned earlier from my GitHub project. With this technique, you can deliver an authentic look and feel in your Qt apps that target the Android platform. To keep things clean, consistent, and DRY, I banished the basic formatting details to my customized IconLabel element: Text: qsTr("Material Design Icons in QML")Īnchors.verticalCenter: parent.verticalCenterĪnchors.horizontalCenter: parent.horizontalCenter Title: qsTr("Material Design Icons in QML") To demonstrate, I've included the QML source that creates the sample app pictured at the top of this post: I usually import the file as MdiFont, so I can get to the icons from MdiFont.Icon. To use the JavaScript object, we have to add the Icon.js file to the project, and import it into any QML file that needs access to icon names. To get a similar interface for our QML apps, I created a JavaScript object that matches the CSS class names with their corresponding Unicode characters. ![]() 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |