Uikit: Can I replace the icons in the accordion?

[dalenguyen]

Hi, The default accordion use + and - for open and close the accordion. Can I replace that with something else like arrow up and down?

https://getuikit.com/docs/accordion

Thanks,

[aarongerig]

Yes you can: https://github.com/uikit/uikit/blob/develop/src/less/theme/accordion.less#L15-L16

[dalenguyen]

@aarongerig Thanks for giving me the ideas. I am afraid that it could be lost when I update UiKit to next version. So did a better version by using CSS. It also works.

.uk-accordion-title:after{
      background-image: url('../../bower_components/uikit/src/images/icons/chevron-down.svg');
}
.uk-open{
      .uk-accordion-title:after{
              background-image: url('../../bower_components/uikit/src/images/icons/chevron-up.svg');
      }
}

[pioneersingh321]

hi you can use something like this .. hope its will be help full to someone

.uk-accordion li.uk-open .uk-accordion-title:before {
content: url('data:image/svg+xml; utf8, ');
}

.uk-accordion li .uk-accordion-title:before{
content: url('data:image/svg+xml; utf8, ');
}

content: url("data:image/svg+xml; utf8, svg code here ");

and for the svg
https://css.gg/app

you can find signal svg code