Ionic React: How to integrate custom fonts and icon set

Ionic Framework Ionic React
1

Hey,

I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.

Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).

What I did so far:

  1. I added the icon set (all icons are svgs) into “public/assets/customicons/”
  2. I imported IonIcon into my components where needed
  3. Integrated the (e.g. <IonIcon src="…/assets/customicons/6m.svg" size={‘large’} />)

So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables

Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?

Custom Font

Goal: I want that the custom font is shown on all platforms

What I did so far:

  1. Added the custom fonts in “src/assets/fonts/”
  2. Created a “fonts.css” in “src/theme/” where I integrated the font via “@font-face”
    @font-face {
    font-family: ‘FONTNAME’;
    src: url(’…/assets/fonts/FONTNAME.ttf’);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    }
  3. assigned the font to differnet elements

Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)

Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.

Thanks for your help!