New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


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



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



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



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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(