19 files changed, 93 insertions, 57 deletions
diff --git a/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc b/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
index b56b4c1d..124984c1 100644
--- a/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
+++ b/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
@@ -38,7 +38,7 @@
 
     \section1 Structure
 
-    The main .qml file \c wearable.qml consists of an ApplicationWindow, a StackView
+    The main .qml file, \c wearable.qml, consists of an ApplicationWindow, a StackView
     for a stack-based navigation model, and buttons for interactive navigation.
 
     \quotefromfile wearable/wearable.qml
@@ -61,9 +61,9 @@
     \section1 Styling
 
     The demo uses a custom \l {Styling Qt Quick Controls 2}{Qt Quick Controls 2 style}
-    embedded into the demo's resources. Since the style is specific to this particular
-    demo, it only needs to implement a few controls. The style also provides a singleton
-    type that contains various styling attributes, such as fonts and colors.
+    embedded into the demo's resources. The custom style is implemented for a
+    few controls only, as it is specific to this particular demo. It uses a
+    singleton type for various styling attributes, such as fonts and colors.
 
     \list
         \li \c qml/Style/PageIndicator.qml
@@ -83,10 +83,11 @@
 
     \section1 Custom Type
 
-    The demo application contains a custom button type implemented in \c qml/NaviButton.qml.
-    The navigation button is used as a home and back button in \c wearable.qml. \c NaviButton
-    extends the standard AbstractButton API with properties that control the slide in and slide
-    out transitions and the button image.
+    The demo application contains a custom button type implemented in
+    \c qml/NaviButton.qml. The navigation button is used as a home and back
+    button in \c wearable.qml. \c NaviButton extends the AbstractButton type
+    with properties that control the slide in and slide out transitions and
+    the button image.
 
     \quotefromfile wearable/qml/NaviButton.qml
     \skipuntil import "Style"
@@ -98,12 +99,26 @@
     \skipto }
     \printuntil /^\}/
 
+    \section1 Icons
+
+    The demo ships a custom icon theme. The icons are bundled into the \c :/icons
+    folder in the application's resources. The \c index.theme file lists the contents
+    of the icon theme:
+
+    \quotefile wearable/icons/wearable/index.theme
+
+    Finally, the icon theme is selected in \c main():
+
+    \snippet wearable/wearable.cpp icons
+
+    The icons are used on the Launcher Page, which is presented below. See
+    \l {Icons in Qt Quick Controls 2} for more details about icons and themes.
+
     \section1 Launcher Page
 
-    The application launcher, which is specified as the initial content above, is
-    implemented using a circular PathView in \c LauncherPage.qml. Each application is
-    contained within its own .qml file, which is listed in a ListModel on the launcher
-    page.
+    The application launcher is implemented using a circular PathView in
+    \c LauncherPage.qml. Each application is in a separate .qml file,
+    which is added to the ListModel on the launcher page.
 
     \quotefromfile wearable/qml/LauncherPage.qml
     \skipto PathView
@@ -116,6 +131,9 @@
     \skipto "Settings"
     \printuntil delegate:
     \dots 8
+    \skipto icon.width
+    \printuntil icon.name
+    \dots 8
     \skipto onClicked:
     \printto path:
     \dots
@@ -133,29 +151,28 @@
     applications, data acquisition is implemented using \l XMLHttpRequest to
     read from local files. These files were generated by storing responses from
     remote servers in JSON format. This code can be easily modified to acquire
-    data from real remote servers.
+    data from remote servers.
 
     \section2 Navigation
 
     This application displays a walking route from source to destination. This
-    route is obtained as a response by invoking an API provided by
-    \l {https://www.openstreetmap.org/}. The response is in JSON format and the
-    corresponding JavaScript file associated with the application helps interpret
-    the response. Currently, it is not possible to specify the source and destination
-    from within the application, but it can be easily added based on the device's
-    capabilities. For example, user input could be implemented as screens with
-    input fields, or can be communicated over Bluetooth/Wifi from a paired app
-    running on another device such as a smart phone or PC.
+    route information is obtained using the REST API provided by
+    \l {https://www.openstreetmap.org/}. The API response is in JSON format, which
+    is parsed using JavaScript by the application. Currently, it is not possible
+    to specify the source and destination from within the application, but it can
+    be added based on the device's capabilities. For example, user input
+    could be implemented as screens with input fields, or can be communicated
+    over Bluetooth/Wifi from a paired application running on another device
+    such as a smart phone or PC.
 
     \section2 Weather
 
     This application displays weather information such as temperature, sunrise
     and sunset times, air pressure, and so on. This information is obtained
-    as a response to invoking \l {https://openweathermap.org/}. The response is
-    in JSON format and the corresponding JavaScript file associated with the
-    application helps interpret the response. As with the Navigation application,
-    this application can be modified by adding screens to accept location information
-    to obtain weather data for a given location.
+    from \l {https://openweathermap.org/} using its REST API. The API response is
+    in JSON format, which is parsed using JavaScript by the application. This
+    application can also be modified by adding screens to obtain weather data for
+    a given location.
 
     \section2 World Clock
 
@@ -165,7 +182,7 @@
 
     \section2 Others
 
-    The remaining applications return static data for now, but they can easily be
+    The remaining applications return static data for now, but they can be
     modified to process response data obtained from respective services.
 
     \include examples-run.qdocinc
diff --git a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/alarms.png
index f38b3d4e..f38b3d4e 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/alarms.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/fitness.png
index 80ec43cc..80ec43cc 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/fitness.png
diff --git a/examples/quickcontrols2/wearable/icons/wearable/36x36/navigation.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/navigation.png
new file mode 100644
index 00000000..9b8cb8e6
--- /dev/null
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/navigation.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/notifications.png
index bcbe85ef..bcbe85ef 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/notifications.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/settings.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/settings.png
index 093404f9..093404f9 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/settings.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/settings.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/weather.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/weather.png
index 07bf8187..07bf8187 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/weather.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/weather.png
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png b/examples/quickcontrols2/wearable/icons/wearable/36x36/worldclock.png
index 91a70493..91a70493 100644
--- a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36/worldclock.png
diff --git a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/alarms.png
index ba68519a..ba68519a 100644
--- a/examples/quickcontrols2/wearable/qml/Alarms/images/alarms@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/alarms.png
diff --git a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/fitness.png
index 088c15b8..088c15b8 100644
--- a/examples/quickcontrols2/wearable/qml/Fitness/images/fitness@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/fitness.png
diff --git a/examples/quickcontrols2/wearable/icons/wearable/36x36@2/navigation.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/navigation.png
new file mode 100644
index 00000000..8d133abc
--- /dev/null
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/navigation.png
diff --git a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/notifications.png
index c3b284ed..c3b284ed 100644
--- a/examples/quickcontrols2/wearable/qml/Notifications/images/notifications@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/notifications.png
diff --git a/examples/quickcontrols2/wearable/qml/Settings/images/settings@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/settings.png
index a24a1df7..a24a1df7 100644
--- a/examples/quickcontrols2/wearable/qml/Settings/images/settings@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/settings.png
diff --git a/examples/quickcontrols2/wearable/qml/Weather/images/weather@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/weather.png
index 6e4ce2f3..6e4ce2f3 100644
--- a/examples/quickcontrols2/wearable/qml/Weather/images/weather@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/weather.png
diff --git a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock@2x.png b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/worldclock.png
index 03abe162..03abe162 100644
--- a/examples/quickcontrols2/wearable/qml/WorldClock/images/worldclock@2x.png
+++ b/examples/quickcontrols2/wearable/icons/wearable/36x36@2/worldclock.png
diff --git a/examples/quickcontrols2/wearable/icons/wearable/index.theme b/examples/quickcontrols2/wearable/icons/wearable/index.theme
new file mode 100644
index 00000000..da702d4a
--- /dev/null
+++ b/examples/quickcontrols2/wearable/icons/wearable/index.theme
@@ -0,0 +1,14 @@
+[Icon Theme]
+Name=Wearable
+Comment=Qt Quick Controls 2 Wearable Demo Icon Theme
+
+Directories=36x36,36x36@2
+
+[36x36]
+Size=36
+Type=Fixed
+
+[36x36@2]
+Size=36
+Scale=2
+Type=Fixed
diff --git a/examples/quickcontrols2/wearable/qml/LauncherPage.qml b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
index 34f117c4..9d6d9ae9 100644
--- a/examples/quickcontrols2/wearable/qml/LauncherPage.qml
+++ b/examples/quickcontrols2/wearable/qml/LauncherPage.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 import QtQuick 2.7
-import QtQuick.Controls 2.0 as QQC2
+import QtQuick.Controls 2.1 as QQC2
 import "Style"
 
 PathView {
@@ -68,56 +68,53 @@ PathView {
     model: ListModel {
         ListElement {
             title: qsTr("World Clock")
-            icon: "WorldClock/images/worldclock.png"
+            icon: "worldclock"
             page: "WorldClock/WorldClockPage.qml"
         }
         ListElement {
             title: qsTr("Navigation")
-            icon: "Navigation/images/navigation.png"
+            icon: "navigation"
             page: "Navigation/NavigationPage.qml"
         }
         ListElement {
             title: qsTr("Weather")
-            icon: "Weather/images/weather.png"
+            icon: "weather"
             page: "Weather/WeatherPage.qml"
         }
         ListElement {
             title: qsTr("Fitness")
-            icon: "Fitness/images/fitness.png"
+            icon: "fitness"
             page: "Fitness/FitnessPage.qml"
         }
         ListElement {
             title: qsTr("Notifications")
-            icon: "Notifications/images/notifications.png"
+            icon: "notifications"
             page: "Notifications/NotificationsPage.qml"
         }
         ListElement {
             title: qsTr("Alarm")
-            icon: "Alarms/images/alarms.png"
+            icon: "alarms"
             page: "Alarms/AlarmsPage.qml"
         }
         ListElement {
             title: qsTr("Settings")
-            icon: "Settings/images/settings.png"
+            icon: "settings"
             page: "Settings/SettingsPage.qml"
         }
     }
 
-    delegate: QQC2.AbstractButton {
+    delegate: QQC2.RoundButton {
         width: circularView.itemSize
         height: circularView.itemSize
 
-        text: model.title
+        property string title: model.title
+
+        icon.width: 36
+        icon.height: 36
+        icon.name: model.icon
         opacity: PathView.itemOpacity
         padding: 12
 
-        contentItem: Image {
-            source: model.icon
-            fillMode: Image.Pad
-            sourceSize.width: parent.availableWidth
-            sourceSize.height: parent.availableHeight
-        }
-
         background: Rectangle {
             radius: width / 2
             border.width: 3
@@ -180,7 +177,7 @@ PathView {
 
         visible: currentItem ? currentItem.PathView.itemOpacity === 1.0 : 0
 
-        text: currentItem ? currentItem.text : ""
+        text: currentItem ? currentItem.title : ""
         anchors.centerIn: parent
         anchors.verticalCenterOffset: (circularView.itemSize + height) / 2
 
diff --git a/examples/quickcontrols2/wearable/wearable.cpp b/examples/quickcontrols2/wearable/wearable.cpp
index e6fdad74..e90ec413 100644
--- a/examples/quickcontrols2/wearable/wearable.cpp
+++ b/examples/quickcontrols2/wearable/wearable.cpp
@@ -51,6 +51,7 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include <QQuickStyle>
+#include <QIcon>
 
 int main(int argc, char *argv[])
 {
@@ -61,6 +62,10 @@ int main(int argc, char *argv[])
     QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style"));
     //! [style]
 
+    //! [icons]
+    QIcon::setThemeName(QStringLiteral("wearable"));
+    //! [icons]
+
     QQmlApplicationEngine engine;
     engine.load(QUrl(QStringLiteral("qrc:/wearable.qml")));
 
diff --git a/examples/quickcontrols2/wearable/wearable.qrc b/examples/quickcontrols2/wearable/wearable.qrc
index c8143a18..ea81edc6 100644
--- a/examples/quickcontrols2/wearable/wearable.qrc
+++ b/examples/quickcontrols2/wearable/wearable.qrc
@@ -3,18 +3,29 @@
         <file>wearable.qml</file>
         <file>qml/LauncherPage.qml</file>
         <file>qml/NaviButton.qml</file>
+        <file>icons/wearable/index.theme</file>
+        <file>icons/wearable/36x36/alarms.png</file>
+        <file>icons/wearable/36x36/fitness.png</file>
+        <file>icons/wearable/36x36/navigation.png</file>
+        <file>icons/wearable/36x36/notifications.png</file>
+        <file>icons/wearable/36x36/settings.png</file>
+        <file>icons/wearable/36x36/weather.png</file>
+        <file>icons/wearable/36x36/worldclock.png</file>
+        <file>icons/wearable/36x36@2/alarms.png</file>
+        <file>icons/wearable/36x36@2/fitness.png</file>
+        <file>icons/wearable/36x36@2/navigation.png</file>
+        <file>icons/wearable/36x36@2/notifications.png</file>
+        <file>icons/wearable/36x36@2/settings.png</file>
+        <file>icons/wearable/36x36@2/weather.png</file>
+        <file>icons/wearable/36x36@2/worldclock.png</file>
         <file>images/background.png</file>
         <file>images/back.png</file>
         <file>images/back@2x.png</file>
         <file>images/home.png</file>
         <file>images/home@2x.png</file>
         <file>qml/Alarms/AlarmsPage.qml</file>
-        <file>qml/Alarms/images/alarms.png</file>
-        <file>qml/Alarms/images/alarms@2x.png</file>
         <file>qml/Fitness/fitness.js</file>
         <file>qml/Fitness/FitnessPage.qml</file>
-        <file>qml/Fitness/images/fitness.png</file>
-        <file>qml/Fitness/images/fitness@2x.png</file>
         <file>qml/Fitness/images/man-running.png</file>
         <file>qml/Fitness/images/man-running@2x.png</file>
         <file>qml/Fitness/images/man-walking.png</file>
@@ -45,8 +56,6 @@
         <file>qml/Notifications/images/avatarm@2x.png</file>
         <file>qml/Notifications/images/missedcall.png</file>
         <file>qml/Notifications/images/missedcall@2x.png</file>
-        <file>qml/Notifications/images/notifications.png</file>
-        <file>qml/Notifications/images/notifications@2x.png</file>
         <file>qml/Settings/SettingsPage.qml</file>
         <file>qml/Settings/images/bluetooth.png</file>
         <file>qml/Settings/images/bluetooth@2x.png</file>
@@ -54,8 +63,6 @@
         <file>qml/Settings/images/brightness@2x.png</file>
         <file>qml/Settings/images/contrast.png</file>
         <file>qml/Settings/images/contrast@2x.png</file>
-        <file>qml/Settings/images/settings.png</file>
-        <file>qml/Settings/images/settings@2x.png</file>
         <file>qml/Settings/images/wifi.png</file>
         <file>qml/Settings/images/wifi@2x.png</file>
         <file>qml/Style/qmldir</file>
@@ -76,8 +83,6 @@
         <file>qml/Weather/images/sunset@2x.png</file>
         <file>qml/Weather/images/temperature.png</file>
         <file>qml/Weather/images/temperature@2x.png</file>
-        <file>qml/Weather/images/weather.png</file>
-        <file>qml/Weather/images/weather@2x.png</file>
         <file>qml/Weather/images/wind.png</file>
         <file>qml/Weather/images/wind@2x.png</file>
         <file>qml/WorldClock/Clock.qml</file>
@@ -98,7 +103,5 @@
         <file>qml/WorldClock/images/swissnighthour@2x.png</file>
         <file>qml/WorldClock/images/swissnightminute.png</file>
         <file>qml/WorldClock/images/swissnightminute@2x.png</file>
-        <file>qml/WorldClock/images/worldclock.png</file>
-        <file>qml/WorldClock/images/worldclock@2x.png</file>
     </qresource>
 </RCC>