Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

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?

share|improve this question
    
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 '13 at 19:40
    
iloveubuntu.net/… –  Daniel Holm Jun 11 '13 at 23:00
    
Surely, the api must provide a way to get an icon from the system wide theme. Why was this closed? –  andrewsomething Jul 27 '13 at 20:31
add comment

2 Answers

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")
}
share|improve this answer
    
This answer needs to be updated. The correct and official way of using icons is, iconName: "reload" or iconSource: "image://theme/reload" –  nik90 2 days ago
add comment

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.....

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.