Skip to main content

Notifications

Community site session details

Community site session details

Session Id : INTN778uQfQ5nL2lFNbq4W
Power Apps - Building Power Apps
Answered

Changing color when hover or pressing a SVG icon

Like (0) ShareShare
ReportReport
Posted on 6 Feb 2024 19:20:55 by 1,027

Dear community,

I have made a SVG icon and put that in an image on my canvas. It looks great.

I have put a transparent PowerApps icon (and not a button) on top of it for the hovering and pressing properties
(and offcourse the pointing cursor).

 

I have declared a color in the OnStart:

 

Set (
    defaults;
    {primaryColor: ColorValue("#6200EE")}
);;
Set (
    defaults;
    Patch(
        defaults;
        {
            primaryColorHex: Match(
                JSON(defaults.primaryColor;JSONFormat.IgnoreUnsupportedTypes);
                "#[a-fA-F0-9]{6}"
            ).FullMatch
        }
    )
)
 
and offcourse declared that variable in the SVG code:
 
"data:image/svg+xml;utf8, "&
EncodeUrl("
<svg fill='"&defaults.primaryColorHex&"' xmlns=........
 
What i woud like is when i hover over the icon the color then must be changed of the SVG image and offcourse the same for pressing on the icon. Is that possible?
 
I quess i have to change the color in the OnStart in the propery HoverFull of the icon. Is that possible?
 
GR. P
 
 

 

 

 

 

 

  • Verified answer
    TheRobRush Profile Picture
    11,121 Super User 2025 Season 1 on 06 Feb 2024 at 21:15:44
    Re: Changing color when hover or pressing a SVG icon

    to change the color of your svg if it being pressed, jsut place a button above it and make it transparent and set your svg color based on the .Pressed property of the invisible button

  • TheRobRush Profile Picture
    11,121 Super User 2025 Season 1 on 06 Feb 2024 at 21:14:39
    Re: Changing color when hover or pressing a SVG icon

    You can not alter the color of anything when something else is hovered above, and ONLY to self items on things that have a hovercolor/hoverfill/hoverbordercolor property. We can not unfortunately access the onhover info directly, or reference it.

  • CU16021406-1 Profile Picture
    1,027 on 06 Feb 2024 at 21:13:04
    Re: Changing color when hover or pressing a SVG icon

    Oke let's make it a little easier. I have an PowerApps icon with a Printer and an envelop as SVG file.

    What i would like is when hovering over the printer the color of the SVG file changes. Also with the pressing of the icon. How can i do that?

     

    PeKi72_0-1707253978843.png

     

     

  • mmbr1606 Profile Picture
    12,228 Super User 2025 Season 1 on 06 Feb 2024 at 21:09:03
    Re: Changing color when hover or pressing a SVG icon

    Hey @PeKi72 

     

    Try something like this

     

    On visible of first screen:

     

    Set(defaults, {primaryColor: ColorValue("#6200EE"), hoverColor: ColorValue("#3700B3"), pressColor: ColorValue("#03DAC6")});

     

    Onselect of icon

    Set(currentColor, defaults.pressColor);

     

     

    Let me know if my answer helped solving your issue.

    If it did please accept as solution and give it a thumbs up so we can help others in the community.



    Greetings

  • TheRobRush Profile Picture
    11,121 Super User 2025 Season 1 on 06 Feb 2024 at 21:06:34
    Re: Changing color when hover or pressing a SVG icon

    You could do it WHILE it is being pressed, or even permanently AFTER it has been pressed. But not while hovering, OnHover is not aproperty that exists for our use unfortunately.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Apps - Building Power Apps

#1
mmbr1606 Profile Picture

mmbr1606 41 Super User 2025 Season 1

#2
WarrenBelz Profile Picture

WarrenBelz 37 Most Valuable Professional

#3
MS.Ragavendar Profile Picture

MS.Ragavendar 34

Overall leaderboard
Loading started