Add svg to dropdown menu without repeating the svg element-CodePudding

I have an svg of right arrow as

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>

i need to add this to dropdown items. But without repeating the svg element.

I have tried

.arrow_forward::after{
  content:  url('data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>');

}

<li><a href="history.php" ><span ></span>History</a></li>

it is not displaying

CodePudding user response：

It is not the right way to add svg to html. Try this below:

    <li>
      <a href="history.php" 
        ><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
          <path d="M0 0h24v24H0V0z" fill="none" />
          <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z" />
        </svg>
        History</a
      >
    </li>

Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path

CodePudding user response：

Some characters need encoding as this is to be part of a url.

.arrow_forward::after {
  content: url("data:image/svg xml,");
}

<ul>
  <li><a href="history.php" ><span ></span>History</a></li>
</ul>