# Rotated button in Perspective?

**URL:** <https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494>\
**Category:** Ignition\
**Tags:** perspective, ignition80\
**Created:** [March 15, 2021, 6:42pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494 "2021-03-15T18:42:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 15, 2021, 6:42pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/1 "2021-03-15T18:42:04Z")

</div>

How can I rotate text and icon in a button? I can rotate text (sort of) with a CSS transform, but:

1. this only rotates the text, the icon doesn’t come with it (icon stays where it was)
2. bounds still use the width of the button, e.g. if the width of the button doesn’t support the length of the text, it will line-wrap, despite the height of the button fully supporting the length of the text when rotated.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60f8daa3ef5fe91a7f273af4182cd8f879f3b9ae.png)

Rotated text:

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

Edit:  
Setting the icon to display at the bottom kind of works, but I still can’t get it rotated…  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/1/413ef414946b7776280711e9820f24bad8c63be7.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 15, 2021, 9:31pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/2 "2021-03-15T21:31:59Z")

</div>

I ended up just making my own button using a flex container with an icon and label within it.

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

---

<div class="post-metadata">

**Author:** ![jian.ng](https://avatars.discourse-cdn.com/v4/letter/j/5f9b8f/32.png) [@jian.ng](https://forum.inductiveautomation.com/u/jian.ng)\
**Post date:** [July 30, 2021, 8:04pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/3 "2021-07-30T20:04:05Z")

</div>

Just wondering, how did you rotate the label?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 30, 2021, 9:05pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/4 "2021-07-30T21:05:46Z")

</div>

Add these styles:  
`writingMode: vertical-rl`  
`transform: scale(-1,-1)`

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [July 30, 2021, 10:46pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/5 "2021-07-30T22:46:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 30, 2021, 10:58pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/6 "2021-07-30T22:58:32Z")

</div>

You can’t use rotate in a flex container, well you can, but have fun 😉

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [July 30, 2021, 11:48pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/7 "2021-07-30T23:48:38Z")

</div>

but still the same, add a coordinate container to the flex container and then add the button on the coordinate.  
Rotate and play with the binding and widths and heights to make sure that the button uses all available space in the container.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21becf2d90c95855485a5b51a6f4f10f7efdb998.png)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 31, 2021, 12:30am UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/8 "2021-07-31T00:30:49Z")

</div>

That’ll work too, many ways to do things in Ignition!

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [March 14, 2023, 8:33pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/9 "2023-03-14T20:33:38Z")

</div>

You could add your own SVG icon to the icons.svg file that has the rotated SVG, using a simple transform.

```auto
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons

```

for instance, I made "cache\_cw" and "cache\_ccw" from the default cache icon:

```auto
<svg viewBox="0 0 24 24">
      <g class="icon" id="cache_ccw">
         <path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z" />
      </g>
   </svg>

   <svg viewBox="0 0 24 24">
      <g class="icon" id="cache_cw" transform="scale(-1,1)" transform-origin = "center">
         <path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z" />
      </g>
   </svg>

```

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

Also, a nice tool:  
[https://editsvgcode.com/](https://editsvgcode.com/)

I typically trim down the icon list and make my own subset file with only the used icons so the whole file doesn't have to be loaded. It does make a difference when I have multiple icons loading in multiple templates. Each call to the icon library loads the entire file (11KB vs 489KB)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 14, 2023, 9:00pm UTC](https://forum.inductiveautomation.com/t/rotated-button-in-perspective/44494/10 "2023-03-14T21:00:50Z")

</div>

I wish I knew about `transform-origin` before! I've been translating to do that which is super fun  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/dfb0b641019a97cfb55062fa55872e33698b950a.png)