Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

How to make plus icon bigger in accordion?

My question is about the accordion https://ktui.io/docs/accordion

I would to increase the plus icon. Adding 

class="lucide lucide-plus kt-accordion-indicator-on w-6 h-6"
does make the icon bigger, but there is an offset to the left. Only half of the icon is above the accordion line. How to fix that?

user
Adam Nielsen 9 months ago
Tailwind 4
4 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

user
Adam Nielsen 9 months ago

Hey, its working now, not sure why - you can delete this if you want. Sorry about it.


user
Adam Nielsen 9 months ago

I’m seeing the same issue when using size-... The SVG icon shifts too far to the right and is no longer aligned above the accordion line.

Here’s a screenshot for reference: https://imgur.com/a/n0hvwvD

user
Sean Author 9 months ago

Hi,

Are you compiling your assets with build tools when you edit your HTML classes ? Please note that Tailwind requires recompilation the CSS whenever you edit your HTML. For more info please refer to this docs:
https://keenthemes.com/metronic/tailwind/docs/getting-started/installation

Regards,
Sean


user
Sean Author 9 months ago

Hi,

You can just use Tailwind Size class "size-5" or "size-5.5":


class="kt-accordion-indicator-on size-5"


After changing or adding any Tailwind Class in your code please regenerate your CSS by recompiling the CSS:
https://keenthemes.com/metronic/tailwind/docs/index.html

Regards,
Sean


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(