Угловой коврик-иконка для масштабирования собственного svg

Question

Я пытаюсь вставить mat-con в кнопку, которая является частью пользовательского компонента.

`<button mat-button>
  <mat-icon svgIcon="jenkins" class="material-icons md-10"></mat-icon>  
  Jenkins
</button>`

CSS-файл моего компонента выглядит так:

.material-icons.md-10 { font-size: 10px; }

Но когда я открываю свою страницу, это выглядит так: Неверный размер

Это должен быть логотип jenkins (http://jenkins.io) как svg-графикаНо если я изменю размер шрифта, размер изображения не изменится. Единственное, что я вижу, это его небольшая часть.

Как изменить размер значка или увеличить его?

Спасибо

Answer 1

При использовании настраиваемого svg-значка необходимо использовать свойство height, чтобы изменить размер значка.

.material-icons.md-10 {
     height: 10px;
 }

Answer 2

Если кому-то интересно.

Решение Г. Трантера может быть правильным, но здесь оно не работает.

Моя иконка не была квадратной.Я масштабировал его, и все работало нормально.

Answer 3

Единственный способ, которым я мог успешно изменить размер иконки материала SVG, был с использованием подхода "transform: scale (x)".Кажется, что angular не меняет размер окна просмотра SVG на основе атрибутов CSS или размера контейнера.

Answer 4

Попробуйте изменить ширину и высоту значка и / или высоту строки в дополнение к размеру шрифта:

.material-icons.md-10 { 
    font-size: 10px; 
    width: 10px; 
    height: 10px; 
    line-height: 10px; 
}

Вам может нужно добавить !important модификатор (не помню).