How to display icons 'mdi' in a markdown document for github

Question

I'm writing some documentation and I'll need to display some icons in a table on a markdown file.

For more maintainability I used a html array structure.

And the icons I use come from this library.

Example of my code:

<table>
  <thead>
    <tr>
      <th>icon</th>
      <th>Button name or features</th>
      <th>Name of the icon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
          <path fill="#000000"
            d="M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 
            9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 
            19,3H5C3.89,3 3,3.9 3,5Z" />
        </svg>
      </td>
      <td>User information</td>
      <td>account-box</td>
    </tr>
  </tbody>
<table>

Thanks in advance!

Answer 1

I just answered my question, I found a workaround. Initially, I wanted to display icons in a README.md file using the tag:

<svg style="width:24px;height:24px" ...>
    <path ... />
</svg>

But I am not figuring out how to do this.

So I use an alternative method with:

Example in html: <img src="icons/png/github-circle.png">

Example in markdown: ![image](icons/png/github-circle.png)

You just need to use a library that allows the downloading of icons in the format: .png,.jpg, .gif or.svg. Here is a documentation where the subject of the images is explained there quickly.

In my example on github I have a folder like this:

• icons
  • svg
    • icon1
    • icon2
    • icon3 ...
  • png
    • icon1
    • icon2
    • icon3 ...

Where I come to look for the elements in a classic way with the path. If someone has a better idea, don't hesitate to share it. Have a good day !