cant insert a custom logo ion icon?

Question

When I use the following code I can easily insert the Twitter logo into my website

<li class="social-item">
  <a href="https://####" class="social-link">                           
    <ion-icon name="logo-twitter"></ion-icon>
  </a>
</li>

but when I import a custom logo (11)

<li class="social-item">
  <a href="https://####" class="social-link">                           
    <ion-icon src="./11.svg"></ion-icon>
  </a>
</li>

The logo disappears and the 11.svg is not there!!! however, I can still click the place of the logo and the link works fine :/ what might be the issue and how can I fix it?

Answer 1

I hope I can help you. First, make sure Ionic is "installed" correctly:

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

make sure you are using the latest version. Then, check if your icon is saved in SVG format. Once you have done this, all you need to do is use the standard component, but reference the path to your custom SVG. An additional tip is to create a subfolder in the folder where your index.html is located and place your SVG file and then refer to this path as it does not appear to be a syntax error with the documentation.