在Angular 4+中，可以使用ng2-svg-icon库来从SVG文件中使用图标。以下是使用ng2-svg-icon的解决方法，包含代码示例：

1. 首先，安装ng2-svg-icon库：

npm install ng2-svg-icon --save

2. 在app.module.ts中导入ng2-svg-icon模块，并将其添加到imports数组中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SvgIconModule } from 'ng2-svg-icon';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SvgIconModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 创建一个SVG文件（例如，icon.svg），并将其放在assets文件夹中。确保SVG文件的路径在angular.json文件中正确配置。

4. 在组件中使用ng2-svg-icon指令来显示SVG图标。在组件的HTML模板中，使用svg-icon指令，并指定要显示的SVG文件名和图标的名称：

在上面的代码中，将src属性设置为SVG文件的路径，将name属性设置为SVG文件中要使用的图标的名称。

5. 可以在组件的SCSS文件中自定义图标的样式。例如，可以使用ng2-svg-icon提供的CSS类来设置图标的大小和颜色：

svg-icon {
  &.iconName {
    width: 24px;
    height: 24px;
    fill: red;
  }
}

在上面的代码中，将.iconName类应用于图标，并设置宽度、高度和填充颜色。

这样，就可以在Angular应用中使用来自SVG文件的图标了。