[IGN-6700] rotate icon on button

[witman]

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.

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.

[victordcq]

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); }{

[witman]

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

[kgamble]

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

[cmallonee]

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.

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.

[kgamble]

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

EDIT: More specifically I am looking to do this (works on a regular icon), but on a button, with the text staying the same

[cmallonee]

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.

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

[kgamble]

@cmallonee

If you wrap the Icon in your example in a Flex Container you'd see similar (ignored) behavior.

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 "style injection" achieve this by rotating any element with the included class + svg?

View Export If that helps (3.7 KB)

[cmallonee]

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.

[cmallonee]

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

[kgamble]

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.