Using custom icons : '?' shows up

Question

I am implementing a custom Sign-in with Apple Button in my project. I went through these steps to use the custom icon:

1. Went to this site to get the icon and related dart files.
2. placed the dart file in lib folder, and the .ttf file in assets/icons
3. Here is my pubspec.yaml code:

  assets:
    - assets/

  // assets end, fonts begin

  fonts:
    - family: Custom
      fonts:
        - asset: icons/Appleicon.ttf

4. In the concerned page: import 'package:project/appleicon_icons.dart' as CustomIcon; Code for concerned Container:

Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          color: Colors.black),
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(0, 9, 0, 9),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(CustomIcon.Appleicon.apple,
                                color: Colors.white),
                            SizedBox(width: 11),
                            Text(
                              "Continue with Apple",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w600,
                                  fontSize: 14,
                                  fontFamily: 'SF Pro'),
                            )
                          ],
                        ),
                      ),
                    ),

Output:

Query: How do i get the apple icon i chose instead of '?' box ?

EDIT: i tried using Ionicons plugin, which does have an apple icon. Icon(Ionicons.logo_apple, color: Colors.white), i replaced the custom icon with this, yet same output. Why is that?