Is it possible for me to add an alt attribute to an svg or an icon so that if it fails to load my users can have an idea of what is being rendered there as in images...something like this:
<svg class="header__social--icon">
<use xlink:href="./data/images/sprite.svg#icon-twitter"></use>
</svg>
now can I have a way to add an alt as in images for example
<svg class="header__social--icon" alt="twitter svg">
<use xlink:href="./data/images/sprite.svg#icon-twitter"></use>
</svg>
so that if the svg icon cannot be displayed the twitter svg is shown?
Yes, you can. The alt attribute specifies an alternate text for an area, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
What you could do, is export it as a svg file, then use the img tag, and add an alt to it. Hope this helps. Other than that I dont think there is a way.
Like this:
<img src="path/to/your/svg/imag" alt="this is the alternative text">