# \[IGN-6700\] rotate icon on button

**URL:** <https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 14, 2022, 6:38pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757 "2022-06-14T18:38:05Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [June 14, 2022, 6:38pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/1 "2022-06-14T18:38:05Z")

</div>

How can we apply rotation to the icon on a button? I've tried various styles with no effect. It seems transform is ignored when applied to image or icon level in button component.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bd3fc3e35c3c2b969d2b5cdb2cde47336451a9b.png)  
We can rotate the whole button with `position.rotate` property, or a `transform:rotate` style, but that doesn't give the desired effect. If there's no way to rotate just the icon, we'll remove it and layer an icon component on top the button, but we'd like to avoid that if there is a way to rotate the built-in icon on a button.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 15, 2022, 7:01am UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/2 "2022-06-15T07:01:21Z")

</div>

seems like a bug, none of the styles are being passed down to the img/icon

in the mean time untill igntion fixes this, you could create a styleclass to target the svg underneath it and use css injection;…

`}.psc-YOURSTYLENAME svg { transform: rotate(90deg); }{`

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3cb34f73247027f40ddddd5f6ddf19a48550ea81.png)

---

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [June 15, 2022, 5:18pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/3 "2022-06-15T17:18:17Z")

</div>

> [@victordcq](#):
>
> }.psc-YOURSTYLENAME svg { transform: rotate(90deg); }{

Thanks @victordcq! I figured this looked like a bug, but don't have a web background--need to spend some time wrapping my mind around CSS.

We need dynamic rotation (using this in a view as template with rotation set in view parameter). I've already got it done with an icon overlaid, but am curious if there is a way to inject this transform directly in a property on the button so we can create it in an expression that takes the degrees from a parameter on the view? I tried a few variations under image/icon/style/backgroundImage, but didn't have any success.

I guess another way would be to create styles with various rotations and then swap between the styles--almost always want 0, 90, -90, or 180deg, which this solution would work fine for.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [October 4, 2022, 5:37pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/4 "2022-10-04T17:37:55Z")

</div>

@cmallonee do you know if style props not propagating down to button icons is a known bug?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 4, 2022, 5:51pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/5 "2022-10-04T17:51:41Z")

</div>

You're going to have to be more specific because I see style settings propagate down - except for `fill` because there is a more-specific (and therefore higher priority by CSS rules) style applied in the theme files.

 ![Screen Shot 2022-10-04 at 10.47.46 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/82bb92795f6c82ee00deac1fa1110ef2fbb8a6e3.png)

In this screenshot you can (sort of) see that the button has a Named Style attached. This Named Style includes fill and stroke, but only stroke is used on the `<svg>` node because of the `.ia_button--primary svg` rule defined in `light.css`.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [October 4, 2022, 5:53pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/6 "2022-10-04T17:53:26Z")

</div>

The specific example I am looking for, and is above in this post, is the rotation of the SVG

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e9fdf01ef3ba4a711389266439495fdcb5ef80a0.png)

EDIT: More specifically I am looking to do this (works on a regular icon), but on a button, with the text staying the same  
 ![Screen Recording 2022-10-04 at 10.55.54 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f224b36ae18da653dd83a777417cd75685c45926.gif)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 4, 2022, 6:04pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/7 "2022-10-04T18:04:34Z")

</div>

Oh. You can't rotate elements of a flex container, and the icon and label within the button are within a flex `<div>`. If you wrap the Icon in your example in a Flex Container you'd see similar (ignored) behavior.

```auto
# note 'flex-direction' of the div
<div style="flex-direction: row; align-items: center; justify-content: center;"><svg viewBox="0 0 24 24" class="" data-icon="material/call_end" style="height: 24px; width: 24px;">
      <g class="icon" id="call_end">
         <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z"></path>
      </g>
   </svg><div class="text">Button</div></div>

```

Update: Hmm... maybe that's not a rule...

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [October 4, 2022, 6:07pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/8 "2022-10-04T18:07:50Z")

</div>

> [@cmallonee](#):
>
> If you wrap the Icon in your example in a Flex Container you'd see similar (ignored) behavior.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/c/2c4a5723a5f47933dca74c92618cc5d84ed93775.png)  
Note the Flex Container (which works as `row` or `column` wrapping the icon)

I guess a couple questions:

1. Why does this still work (Note that the arrow is right, but the rotation has it pointing left, I was too lazy to make a gif again, but it does the same thing)
2. Why would the [above-listed](https://forum.inductiveautomation.com/t/bug-rotate-icon-on-button/60757/2) "style injection" achieve this by rotating any element with the included class + `svg`?

[View Export If that helps](https://forum.inductiveautomation.com/uploads/short-url/dPH0XqoKv09KWtlWBIbXHTlv4Et.zip) (3.7 KB)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 4, 2022, 6:12pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/9 "2022-10-04T18:12:28Z")

</div>

I don't know that we're aware of this. I'll open a new ticket to investigate. It looks like settings applied at the button level are correctly inherited, but the actual `props.image.style` isn't having the desired effect.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 4, 2022, 6:22pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/10 "2022-10-04T18:22:00Z")

</div>

I've opened a new ticket and updated the thread title to reflect that ticket.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [October 4, 2022, 6:26pm UTC](https://forum.inductiveautomation.com/t/ign-6700-rotate-icon-on-button/60757/11 "2022-10-04T18:26:54Z")

</div>

The most satisfying feeling (probably only on our side) is having your thread title updated to include the bug/ticket number. Because it means your problem will get solved eventually! lol

Thanks for taking a look at this Cody.

In the meanwhile, @victordcq's cheaty style injection will still work.