Add a `data` property to each path where you require dynamic breadcrumb

app-routing.module.ts

const routes: Routes = [
	{
		path: 'plans',
		loadChildren: () => import('./components/plan/plan.module').then(mod => mod.PlanModule),
		data: {
			breadcrumb: "Plans",
			image: "assets/images/planner.svg"
		}
	},
	{
		path: 'events',
		loadChildren: () => import('./components/event/event.module').then(mod => mod.EventModule),
		data: {
			breadcrumb: "Events",
			image: "assets/images/event.svg"
		}
	},
	{
		path: 'exams',
		loadChildren: () => import('./components/exam/exam.module').then(mod => mod.ExamModule),
		data: {
			breadcrumb: "Exams",
			image: "assets/images/exam-alt.svg"
		}
	},
	{
		path: 'university',
		loadChildren: () => import('./components/university/university.module').then(mod => mod.UniversityModule),
		data: {
			breadcrumb: "University",
			image: "assets/images/university_icon.svg",
			path: "/university"
		}
	},
	{
		path: 'documents',
		loadChildren: () => import('./components/document/document.module').then(mod => mod.DocumentModule),
		data: {
			breadcrumb: "Documents",
			image: "assets/images/documents.png"
		}
	},
	{
		path: '',
		component: HomeComponent,
		data: {
			breadcrumb: "Home",
			icon: "home"
		}
	},
	{
		path: '404',
		redirectTo: '**'
	},
	{
		path: '**',
		pathMatch: 'full',
		component: NotFoundComponent,
		data: {
			breadcrumb: "404: Page Not Found",
			isClickable: false
		}
	},
];