12

I am developing a qml-app and I want to put icons on the buttons. I would like to use ubuntu standard icons to get the real ubuntu look for my app. How can I do this?

3
  • You want to use icons from someone else? Mind the copyright! An icon is a creative work. It's copyrighted. So you should first check the copyright-license that comes with that icon. I had this webpage in my bookmarks. It's about Canonical - the business behind Ubuntu - hiring the 'Faenza' guy to create new icons.
    – user85164
    May 2, 2013 at 19:40
  • iloveubuntu.net/… Jun 11, 2013 at 23:00
  • Surely, the api must provide a way to get an icon from the system wide theme. Why was this closed? Jul 27, 2013 at 20:31

3 Answers 3

8

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")
}
1
  • 3
    This answer needs to be updated. The correct and official way of using icons is, iconName: "reload" or iconSource: "image://theme/reload"
    – nik90
    Apr 16, 2014 at 13:32
4

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

AFAICT, this doesn't actually seem to support the full set of icons provided by the Freedesktop Icon Theme Specification though.....

0

The default theme for Ubuntu mobile is Suru and the icons are located in /usr/share/icons/suru

Any of the icons can be used by name. Even icons outside the Suru icon set.

If the file is /usr/share/icons/suru/actions/scalable/like.svg

The code could be:

Action {
    id: likeAction
    iconName: "like"    // the files name without file ending
    text: "I like this"
}

Which gives you an action button with a heart icon.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .