# Issue Aligning Icon to the Left in Button **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 25, 2025, 6:37am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958 "2025-09-25T06:37:13Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\ **Post date:** [September 25, 2025, 6:37am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/1 "2025-09-25T06:37:13Z")
Hi, I have a button that includes an icon, and I want to align the icon to the left. I’ve also tried applying inline styles, but they don’t seem to have any effect. Could you please suggest how I can properly align the icon to the left? Thanks. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/2970e47b113df0666a7a4fbfc3a3f47542971400.png) ---
**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\ **Post date:** [September 25, 2025, 6:59am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/2 "2025-09-25T06:59:39Z")
Try this CSS to the advanced style sheet and selecting the style class `buttoniconleft` on the button. ```css .psc-buttoniconleft .text { flex-grow: 1; } /*Optional to make the icon not hard pressed against the edge*/ .psc-buttoniconleft svg { margin-left: 10px; } ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/56e5ff685b3685b79f0acdd583e40cc51df73593.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/d/cdd552d7af8a8035a971f8aab69379091a1b9864.png) ---
**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\ **Post date:** [September 25, 2025, 8:07am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/4 "2025-09-25T08:07:32Z")
Hi, Thanks for your help. I’ve already created an advanced style class (`stylesheet.css`). Now I’d like to create another advanced class, but when I try, it only creates a regular style class with limited options. Could you please advise how I can create another “ **buttoniconleft** “ advanced style class instead of the default one? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/3/b398d89811dcbe424b03d0907f03fa3c3e261591.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [September 25, 2025, 8:45am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/5 "2025-09-25T08:45:06Z")
The stylesheet is not a class, it's a full css sheet. You can add css rules for as many classes as you'd like in there. What @dgillbee suggested is creating a regular style class called `buttoniconleft`, then adding advanced rules for this class in the stylesheet. Note that you don't HAVE TO create the style class. It's useful to do so to make it appear in the class selection dropdown/menu. If you don't create it, you can still apply that class to a component by typing the class name. ---
**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:** [September 25, 2025, 8:46am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/6 "2025-09-25T08:46:23Z")
The stylesheet and perspective style classes are completely independent of each other, although they can equally define the styles for the same css selectors. For example, the underlying css class selector generated for a perspective style with path "Buttons/Style1" would be `psc-Buttons\/Style1`. You can add more advanced styling to this class in the adv stylesheet for a class already defined as a perspective style by adding this to your stylesheet: ```python .psc-Buttons\/Style1{ backgound-color: #111; } ``` This would add a background colour on top of any other styles defined within the same perspective style class. I would always recommend adding a perspective style for each and every one of the class selectors you add into your stylesheet so that they appear in the classes dropdown menu in view components. ---
**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\ **Post date:** [September 25, 2025, 8:56am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/7 "2025-09-25T08:56:54Z")
Thanks a lot. ---
**Author:** ![TechEnlive](https://avatars.discourse-cdn.com/v4/letter/t/3be4f8/32.png) [@TechEnlive](https://forum.inductiveautomation.com/u/TechEnlive)\ **Post date:** [September 25, 2025, 9:00am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/8 "2025-09-25T09:00:12Z")
Thank you very much for your help! @dgillbee I followed the @pascal.fragnoud instructions and implemented it as suggested. Now it works exactly as we wanted. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/87a19d015f4e97897de3f702d3fb06ecfe449762.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [September 25, 2025, 9:01am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/9 "2025-09-25T09:01:39Z")
You should mark @dgillbee 's answer as the solution, so it appears in the first post for easy access. ---
**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\ **Post date:** [September 25, 2025, 9:13am UTC](https://forum.inductiveautomation.com/t/issue-aligning-icon-to-the-left-in-button/110958/10 "2025-09-25T09:13:47Z")
Alternative way to achieve this using button props Allow text to expand by `textStyle: {margin:auto}` and adjust icon left space by padding `style: {padding:0px 5px} `to button component ![Icon left](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/f/cf2edfb774fd1a20042c6ef68226e7c6a56ac4f7.png)