Are there any standard icons for qml-app-development?

Solution 1:

The official Ubuntu Touch icon theme is called Ubuntu Mobile, and is available for installation in the ubuntu-mobile-icons package. Here is a sample of the icons provided:

Ubuntu Mobile Action icons

To use the icons in your code, just use the path to the icon. For example, to set the icon in a toolbar button, do something similar to this:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/reload.svg")
}

To avoid having to repeat the root path over and over again, I usually use a small function called getIcon which returns the actual path to an icon:

function getIcon(name) {
    return Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/" + name + ".svg")
}

The previous example would then be:

ToolbarButton {
    text: i18n.tr("Refresh")
    iconSource: getIcon("reload")
}

Solution 2:

I've only just started dabbling in QML, but it looks like the Ubuntu SDK provides a way to access icons from the theme, the Icon component. Here's a Hello Worldish example:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    objectName: "mainView"

    width: units.gu(50)
    height: units.gu(75)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Page {
        title: i18n.tr("Icons!")

    Column {

        anchors {
            fill: parent
            margins: root.margins
        }
        spacing: units.gu(1)

        Icon {
            name: "call-start"
            width: 48
            height: 48
         }

        Icon {
            name: "call-stop"
            width: 48
            height: 48
         }

        Icon {
            name: "find"
            width: 48
            height: 48
        }

        }
    }
}

This gives you:

qml-icons-hello-world