Why is my react app displaying a blank screen after importing and using an icon from material ui despite compiling successfully in my console?

Question

This is the code and it runs fine up until I added the "Avatar" line. I had to use react icons instead of material UI because it wasn't displaying. I would also appreciate an alternative package I can install that would allow me to use the Avatar component. Thanks in advance.

import React from 'react';
import { MdOutlineMenu } from 'react-icons/md';
import { FiSearch } from 'react-icons/fi';
import { MdVideoCall } from 'react-icons/md';
import { GrApps } from 'react-icons/gr';
import { IoIosNotifications } from 'react-icons/io';
import Avatar from '@material-ui/core/Avatar';

function header() {
  return (
    <div className='header'>
        <h1>I am a header</h1>
        <MdOutlineMenu />
        <img className='header__logo' 
        src="https://imgs.search.brave.com/0Adz0eT0KyLAofHJ_wU_1- 
        GqmHa0rnORMw9GWm__p0Q/rs:fit:844:225:1/g:ce/aHR0cHM6Ly90c2U0
        /Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5f/SWZFYVVzc2paUXda/MXU5MmIxX0dnSGFF
        /SyZwaWQ9QXBp" alt="" />
        <input type="text" />
        <FiSearch />
        <MdVideoCall />
        <GrApps />
        <IoIosNotifications />
        <Avatar alt="Remy Sharp" src="https://avatars2.githubusercontent.com/u/24712956? 
        s=400&u=b71527e605ae1b748fc2d4157a842e57e427ad44&v=4"/>

    </div>
  );
}

export default header; 

Answer 1

As an alternative to material-ui, you can simply use react-avatar.It can be easily be installed into your app using NPM. Find the instructions in this article here - https://www.npmjs.com/package/react-avatar .

I still can't figure out why material-ui is giving me a blank screen.