ℹ️Icon button

download font and apply on engine

1. Load font in ApplicationWindow using FontLoader

   FontLoader
    {
        id: fontAwesomeFontLoader
        source: "qrc:/Music/assets/fonts/fontawesome.otf"
    }

1. Use font via using

Label{
    font.family: fontAwesomeFontLoader.name
}

1. finally you can use fontAwesome , goto website and search icon and apply unicode via using \ufoue

Label{
    text:"\ufoeu"
    }

Source code for icon button

import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.15
Button {
    id: control
    property bool isMirror: false
    property string setIcon : ""
    property string setIconText : ""
    property string setIconColor : "#ffffff"
    property real setIconSize: 25
    property real radius: height /2
    property bool isGlow: false
    property real iconWidth: 28
    property real iconHeight: 28
    property bool roundIcon: false

    implicitHeight: 55
    implicitWidth: 55
    property string iconBackground: "transparent"

    Image{
        z:2
        visible: !roundIcon && !setIconText
        mirror: isMirror
        anchors.centerIn: parent
        source: setIcon
        scale: control.pressed ? 0.9 : 1.0
        Behavior on scale { NumberAnimation { duration: 200; } }
    }

    Image{
        z:2
        visible: roundIcon && !setIconText
        mirror: isMirror
        sourceSize: Qt.size(iconWidth,iconHeight)
        anchors.centerIn: parent
        source: setIcon
        scale: control.pressed ? 0.9 : 1.0
        Behavior on scale { NumberAnimation { duration: 200; } }
    }

    Label
    {
        z:2
        font.family: root.fontAwesomeFontLoader.name // use here font loader id name 
        anchors.centerIn: parent
        text: setIconText
        color: setIconColor
        visible: setIconText
        font.pixelSize: setIconSize
    }

    background: Rectangle {
        z:1
        anchors.fill: parent
        radius: control.radius
        color: control.iconBackground
        visible: true
        Behavior on color {
            ColorAnimation {
                duration: 200;
                easing.type: Easing.Linear;
            }
        }

        Rectangle {
            id: indicator
            property int mx
            property int my
            x: mx - width / 2
            y: my - height / 2
            height: width
            radius: width / 2
            color: isGlow ? Qt.lighter("#29BEB6") : Qt.lighter("#B8FF01")
        }
    }

    Rectangle {
        id: mask
        radius: height /2
        anchors.fill: parent
        visible: false
    }

    OpacityMask {
        anchors.fill: background
        source: background
        maskSource: mask
    }

    MouseArea {
        id: mouseArea
        hoverEnabled: true
        acceptedButtons: Qt.NoButton
        cursorShape: Qt.PointingHandCursor
        anchors.fill: parent
    }

    ParallelAnimation {
        id: anim
        NumberAnimation {
            target: indicator
            property: 'width'
            from: 0
            to: control.width * 1.5
            duration: 200
        }
        NumberAnimation {
            target: indicator;
            property: 'opacity'
            from: 0.9
            to: 0
            duration: 200
        }
    }

    onPressed: {
        indicator.mx = mouseArea.mouseX
        indicator.my = mouseArea.mouseY
        anim.restart();
    }
}

Note : apply height and width with radius , you can also apply free icon size and also apply iconWidth and iconHeight with roundicon:true

Note : how to use in code

RowLayout{
                spacing: 2
                IconButton{
                    implicitHeight: 45
                    implicitWidth: 45
                    roundIcon: true
                    iconHeight: 42
                    iconWidth: 42
                    setIcon: Theme.isDarkMode ? "qrc:/Icons/bluetooth.svg" : "qrc:/Icons/black/bluetooth.svg"
                }

                IconButton{
                    setIconSize: 22
                    implicitHeight: 42
                    implicitWidth: 42
                    iconBackground: "transparent"
                    setIconColor : Theme.fontColor
                    setIconText: "\uf3c5"
                }

                IconButton{
                    implicitHeight: 45
                    implicitWidth: 45
                    roundIcon: true
                    iconHeight: 42
                    iconWidth: 42
                    setIcon: Theme.isDarkMode ? "qrc:/Icons/cell signal.svg" : "qrc:/Icons/black/cell signal.svg"
                }
            }