html - React replace li bullet with icon

Question

I have found many answers that solve this with CSS or font awesome, however, I have an icon from https://react-icons.github.io/react-icons/icons?name=bi and I want to replace the li tag bullets with one of these icons.

I tried adding <IconName /> in front of each <li> but this doesn't look great and requires lots of styling and so was wondering if there was a simpler solution.

question from:https://stackoverflow.com/questions/65867256/react-replace-li-bullet-with-icon

Answer 1

Create a class in your ul and then style your CSS as seen below:

HTML:

<ul class="sample">
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is also another list item</li>
</ul>

CSS:

ul.sample {
list-style-image: url('**your icon path **  icon_sample.jpg');
}