Using Ionicons icons in offline app

Ionic Framework
1

Hello!
I’m fairly new to coding, so if anyone can assist me I would greatly appreciate it. Also, I’m unfamiliar with all of this terminology used on this site (“Framework”, “Capacitor”, “Appflow”, etc.) so I’m not sure if this is the correct “group” or not to post this.

I’m creating a “control panel” on a touch screen that will have data sent to it and have data read from it via a raspberry pi. This control panel will be operating a piece of equipment and will not be connected to the Internet. My question is this: How can I configure my code so that I can use some of these open source icons in my control panel without being connected to the internet?

Please remember that I am fairly new, so if you could explain it “dumbed down” for me, that would help. If it matters, I am using Visual Studio Code, I have saved my icon in “graphics” folder as power_icon.svg and I have copied the source .js code and placed it in the same graphics folder. Within the body of my HTML code I have placed the following script:

<script type="module" src="graphics/icon.js"></script>
      <script nomodule src="graphics/icon.js"></script>

and within my HTML I have placed the icon in a set of

as this:

<p><ion-icon name="power_icon"></ion-icon></p>

Thank you!

2
3

Thank you Hills.

I had already read that link and I couldn’t figure out how to make it work. The truth is, to use Ionicons is just too complex for a beginner. I think people don’t realize that beginners don’t know even a fraction of the terminology used in the field and don’t explain things accordingly.

Anyway, I was able to find another icon source that was easy to follow and got what I needed to work.

I appreciate your response, though. Thank you again.

EDIT: for those who are having the same issue, the other source is Font Awesome.

1 Like