how to create dynamic menu in angular

I have an Interface like this

export interface INavData {
    name?: string;
    url?: string | any[];
    icon?: string;
  
}

and I set data to this interface like this

export const navItems: INavData[] = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer'
  },
  {
    name: 'Colors',
    url: '/Category/subcategory',
    icon: 'icon-drop'
  },
  {
    name: 'Typography',
    url: '/Category/category',
    icon: 'icon-user'
  }
}

I have a Menus table in database, with following columns 1.Name 2.Url 3.Icon I return this table data with API. Now how to get data from API for this Interface can you help me friends thanks so much

Note: I get data in Service like this:

export class myService {
  readonly BaseURI = 'http://localhost:542213/api';
 constructor(private http: HttpClient) { }
 getMenus()
  {
    return this.http.get<Menus[]>(this.BaseURI + '/Menus');
  }
}

I want to get Name,Url,Icon Values dynamically from api what should I do friends